一、对象
对象可以通过两种形式定义:声明(文字)形式和构造形式。即:
var myObj = {
key: value
// ...
};
或:
var myObj = new Object();
myObj.key = value;
对象还有一些内置对象: String、Number、Boolean、Object、Function、Array、Date、RegExp、Error。
访问对象属性可以使用. 操作符(属性访问)或者[] 操作符(键访问),区别在于:于. 操作符要求属性名满足标识符的命名规范,而[".."] 语法
可以接受任意UTF-8/Unicode 字符串作为属性名。
属性描述符
ES5 开始,JS所有的属性都具备了属性描述。
1、 Writable(是否可修改属性)
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // 不可写!
configurable: true,
enumerable: true
} );
myObject.a = 3; (严格模式会报错)
myObject.a; // 2
2、 Configurable
只要属性是可配置的,就可以使用defineProperty(..) 方法来修改属性描述符。但是有一个例外:即便属性是configurable:false, 我们还是可以把writable 的状态由true 改为false,但是无法由false 改为true。除了无法修改,configurable:false 还会禁止删除这个属性。
3、 Enumerable(是否可枚举)
表示能否通过for-in 循环返回属性
4、 访问描述符(Getter、Setter)
当你给一个属性定义getter、setter 或者两者都有时,这个属性会被定义为“访问描述符”(和“数据描述符”相对)。对于访问描述符来说,JavaScript 会忽略它们的value 和writable 特性,取而代之的是关心set 和get(还有configurable 和enumerable)特性。
遍历
for..in 循环可以用来遍历对象的可枚举属性列表(包括[[Prototype]] 链),实际上并不是在遍历值,而是遍历下标来指向值。
ES5 中增加了一些数组的辅助迭代器,包括forEach(..)、every(..) 和some(..)。
ES6 增加了一种用来遍历数组的for..of 循环语法(如果对象本身定义了迭代器的话也可以遍历对象),直接遍历值而不是数组下标。数组有内置的@@iterator,因此for..of 可以直接应用在数组上,普通的对象没有内置的@@iterator,所以无法自动完成for..of 遍历。
关于new操作符
调用构造函数实际上会经历以下4个步骤:
(1) 创建一个新对象;
(2) 让空对象的__proto__(IE没有该属性)成员指向了构造函数的prototype成员对象;
(3) 使用apply调用构造器函数,this绑定到空对象obj上;
(4) 返回新对象。
function NEW_OBJECT(Foo){
var obj={};
obj.__proto__=Foo.prototype;
obj.__proto__.constructor=Foo;
Foo.apply(obj,arguments)
return obj;
}
二、原型
1. [[Prototype]]
JavaScript 中的对象有一个特殊的[[Prototype]] 内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时[[Prototype]] 属性都会被赋予一个非空的值。所有普通的[[Prototype]] 链最终都会指向内置的Object.prototype。
当我们试图访问一个对象下的某个属性的时候,会在JS引擎触发一个GET的操作,首先会查找这个对象是否存在这个属性,如果没有找的话,则继续在prototype关联的对象上查找,以此类推。如果在后者上也没有找到的话,继续查找的prototype,这一系列的链接就被称为原型链。
2. property
只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性。
3. constructor
,对象的.constructor 会默认指向一个函数,这个函数可以通过对象的.prototype引用,.constructor 并不是一个不可变属性。它是不可枚举的,但是它的值是可写的(可以被修改)。
一种混合模式:
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
4. 继承
function Foo(name) {
this.name = name;
}
Foo.prototype.myName = function() {
return this.name;
};
function Bar(name,label) {
Foo.call( this, name );
this.label = label;
}
// 我们创建了一个新的Bar.prototype 对象并关联到Foo.prototype
Bar.prototype = Object.create( Foo.prototype );
// 注意!现在没有Bar.prototype.constructor 了
// 如果你需要这个属性的话可能需要手动修复一下它
Bar.prototype.myLabel = function() {
return this.label;
};
var a = new Bar( "a", "obj a" );
a.myName(); // "a"
a.myLabel(); // "obj a"
上面代码的核心为语句Bar.prototype = Object.create( Foo.prototype )。调用Object.create(..) 会凭空创建一个“新”对象并把新对象内部的[[Prototype]] 关联到你指定的对象(本例中是Foo.prototype)。
备注:Object.create原理
上述代码如果用以下两种方式:
// 和你想要的机制不一样!
Bar.prototype = Foo.prototype;
// 基本上满足你的需求,但是可能会产生一些副作用 :(
Bar.prototype = new Foo();
Bar.prototype = Foo.prototype 并不会创建一个关联Bar.prototype 的新对象,它只是让Bar.prototype 直接引用Foo.prototype 对象。因此当你执行类似Bar.prototype.
myLabel = ... 的赋值语句时会直接修改Foo.prototype 对象本身。
Bar.prototype = new Foo() 的确会创建一个关联到Bar.prototype 的新对象。但是它使用了Foo(..) 的“构造函数调用”,如果函数Foo 有一些副作用(比如写日志、修改状态、注册到其他对象、给this 添加数据属性,等等)的话,就会影响到Bar() 的“后代”,后果不堪设想。
Bar.prototype = new Foo() 的确会创建一个关联到Bar.prototype 的新对象。但是它使用了Foo(..) 的“构造函数调用”,如果函数Foo 有一些副作用(比如写日志、修改状态、注册到其他对象、给this 添加数据属性,等等)的话,就会影响到Bar() 的“后代”,后果不堪设想。
Object.create的polyfill:
if (!Object.create) {
Object.create = function(o) {
function F(){}
F.prototype = o;
return new F();
};
}
ES6 添加了辅助函数Object.setPrototypeOf(..),可以用标准并且可靠的方法来修改关联。
我们来对比一下两种把Bar.prototype 关联到Foo.prototype 的方法:
// ES6 之前需要抛弃默认的Bar.prototype
Bar.ptototype = Object.create( Foo.prototype );
// ES6 开始可以直接修改现有的Bar.prototype
Object.setPrototypeOf( Bar.prototype, Foo.prototype );