avatar 奔跑的Q丶

主题凑合用,样式即将改版...

理解 JavaScipt new 操作符

在《JavaScript 高级程序设计》中提到使用 new 操作符会经历 4 个步骤:

(1) 创建一个新对象;

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);

(3) 执行构造函数中的代码(为这个新对象添加属性);

(4) 返回新对象。

假设我们有一个构造函数 Foo 。这里要理解在创建了一个新函数时,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象。而在默认情况下,所有原型对象都会自动获得一个 constructor 属性,这个属性包含一个指向 prototype 属性所在函数的指针。

1
2
3
4
5
6
7
function Foo(name) {
this.name = name
}
Foo.prototype.getName = function() {
console.log(this.name)
}

然后通过 new 方法创建实例 bar。我们知道,当调用构造函数创建一个新实例后,该实例的内部将包含一个指针指向构造函数的原型对象。ECMA-262 第 5 版管这个指针叫 [[Prototype]] ,但Firefox、Chrome、Safari在每个对象上都支持一个属性 __proto__ ,也就相当于这个属性。重要理解的是这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间

1
2
3
var bar = new Foo('bar')
console.log(bar) // Foo {name: "bar"}
bar.getName() // bar

现在根据以上的规则,我们手动来实现一个 new 的过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 首先创建一个空对象
var baz = new Object()
// 2. 把这个对象的 [[Prototype]] (__proto__)指向 Foo 的 prototype
Object.setPrototypeOf(baz, Foo.prototype)
// 在控制台中也可以这样写:
// baz.__proto__ = Foo.prototype
// 3. 传递 FOO 的属性及作用域
Foo.call(baz, 'baz')
// 4. 验证
baz.getName() // baz