现实世界是由无数的事物或对象组成,事物都有各独特的属性和一些动作行为,一般我们可以通过事物的某些特征或行为动作描述它。JavaScript中也是如此,JavaScript对象是多个键值对的集合,键我们称之为对象的属性,值称之为属性值。如果某个属性的值是函数,那么我们称这个属性是该对象的一个方法。
一、JavaScript对象分类
JS中对象大致可以分为3大类
1.本地对象
这类对象是独立于宿主环境的对象,不因宿主环境的改变而有任何不同。
名称 | 内容 |
---|---|
Object | 称他为原始对象,JS中其他的本地对象都继承自他,他的所有方法和属性都会出现在其他对象中。 |
Function | 函数其实是功能完整的对象,他也有自己的属性和方法,我们使用function关键字定义的所有函数都属于该类。 |
Array | 数组对象比较特别,因为它的键是从0开始的数字。并且是用中括号“[]”包裹的。 |
String | 文本对象 |
Boolean | 布尔对象 |
Number | 数字对象 |
Date | 时间对象 |
RegExp | 正则表达式对象 |
2.内置对象
内置对象也是独立于宿主环境的,但它只有在程序被执行之前才出现。
名称 | 内容 |
---|---|
Global | 全局对象是预定义的对象,作为JavaScript的全局函数和全局变量的占位符,全局对象只是一个对象,而不是一个类,既没有构造函数也无法被实例化 |
Math | Math对象和Global一样,没有构造函数,也不能使用new实例化。它是专门用于执行数学计算的数学函数和数学常量的集合 |
3.宿主对象
所有由宿主实现的对象都属于该类,JavaScript中的宿主对象是Web对象,所有DOM和BOM对象都是宿主对象。
由宿主提供的对象,在浏览器中window对象以及其下边所有的子对象(如bom、dom等等),在node中是globla及其子对象,也包含自定义的类对象。
二、JavaScript对象的创建
1.对象字面量方式
对象字面量方式是创建自定义对象的首选模式,简单方便。
缺点:使用同一个接口创建很多对象,会产生大量的重复代码。比如我想再创建一个person1对象,我就得把上面的代码再重新写一遍,改变不同的属性值。
var person = {
name: '小白开发',
job: 'html',
getName: function () {
alert(this.name);
}
}
2.工厂模式
通俗地讲,工厂模式就是将创建对象的语句放在一个函数里,通过传入参数来创建特定对象,最后返回创建的对象。函数createPerson()能够根据接受到的参数来构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次它都会返回一个包含2个属性和一个方法的对象。
缺点:工厂模式虽然可以创建多个相似的对象,但却不能解决对象标识的问题,即怎样知道一个对象的类型。构造函数模式应运而生。
function createPerson(name, job) {
var obj = new Object();
obj.name = name;
obj.job = job;
obj.getName = function () {
alert(this.name);
}
return obj;
}
var p1 = createPerson('小白开发1', 'html1');
var p2 = createPerson('小白开发2', 'html2');
3.构造函数模式
构造模式创建对象有以下几点不同:没有显示地创建对象;直接将属性和方法赋给this对象;没有return语句。
此外,还应注意到要创建Person的实例,必须要使用new操作符,创建的实例对象将有一个constructor(构造器)属性,指向Person构造函数。调用构造函数创建对象经过了以下几个过程:
1.创建一个新对象
2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
3.执行构造函数中的代码
4.返回新对象(不需要显式返回)
构造函数虽好用,但也不是没有缺点。使用构造函数的主要问题是:每个方法都要在每个实例上创建一遍。在ECMAScript中,函数即对象,因此每定义一个函数,也就是实例化了一个对象。
function Person(name, job) {
this.name = name;
this.job = job;
this.getName = function () {
alert(this.name);
}
}
var p1 = new Person('小白开发1', 'java');
var p2 = new Person('小白开发2', 'php');
4.原型模式
function Person(){ }
Person.prototype.name = 'Claiyre';
Person.prototype.sex = 'female';
Person.prototype.class = 5;
Person.prototype.getName = function (){
console.log(this.name);
}
var p5 = new Person();
p5.getName(); //Claiyre
var p6 = new Person();
p6.getName(); //Claiyre
三、对象方法
1.属性访问方式
- 点操作符访问对象属性(.)
- 中括号操作符访问对象属性([])
- 中括号操作符:用变量来访问一个属性。
var person = {
name: '小白开发',
job: 'html',
getName: function () {
alert(this.name);
}
}
var result = person.name;
var result2 = person[job];
2.更新对象的属性:
- 点操作符或中括号操作符指定后直接更新
person.name='大神开发';
person[job]='全栈';
3.给对象添加属性:
- 点操作符或中括号操作符定后直接添加
person.teacher = 'YY';
person[teacher2] = '欢欢';
4.删除对象的属性:
delete person.teacher;
delete person[teacher2];
5.检查一个对象属性是否存在
person.hasOwnProperty(names);//true
person.hasOwnProperty(teacher);//false
网友评论