js构造函数中的疑点
aototo opened this issue · 0 comments
构造函数已经是老生常谈的事情了。这里讲一些比较基础的东西。
先看下一个例子
function Book(name) {
if (!(this instanceof Book)) {
// the constructor was called without "new".
return new Book(name);
}
}
var myBook = Book(name);
var myBook1 = Book(name);
myBook.constructor === myBook1.constructor // true
首先判断this是否为Book的实例,不是就返回新的实例。经常用于解决在构造函数前面忘记使用new
的情况,如果没有使用在function前面使用new,那就按正常的函数执行。那为什么这里可以这么使用?
我们先看下new
的原理
(1) 创建一个新的对象: var myBook = New Object()
(2) 设置对象的__proto__ 指向构造函数的prototype
myBook.__proto__ = Book.prototype
到了第二步骤我们就可以看到myBook可以访问构造函数的prototype的constructor。
var myBook = New Object();
myBook.__proto__ = Book.prototype;
myBook instanceof Book // true
当执行第二步骤以后例子中的 if (!(this instanceof Book))
就不会被执行。所以this instanceof Book
可以判断当前函数是否使用new。
(3)第三步就是执行Book函数,并且让this指向myBook对象
第四步就是判断Book返回值的类型:
判断条件
(1)如果是值类型就丢弃,返回instance。
(2)如果是引用类型,就返回这个引用类型的对象,替换掉instance。
例子:
function Book() {
return 2;
}
var myBook = new Book();
myBook instanceof Book // true
return 2属于值类型,包括String、布尔值、null、undefined等..如果是值类型,就丢弃返回instance。
function Book() {
var newObj = {}
return newObj;
}
var myBook = new Book();
myBook instanceof Book // false
如果是引用类型,就返回这个引用类型的对象
function Book() {
return new Number();
}
...
如果return的值是一个Number 对象,那么实例对象的值就是Number 对象。
Note: 使用Object.create创建的对象的__proto__并没有指向任何的构造函数
原型链继承需要注意的一点
例子:
function Car() {}
function Bmw() {}
Bmw.prototype = new Car();
Bmw.prototype.constructor = Bmw;
var bmw1 = new Bmw();
比较奇怪的是 Bmw.prototype.constructor = Bmw; 解释下为什么要这么处理。
假设如果没有这行
bmw1.constructor === Car //true
Bmw.prototype 实际上是 new Car() 的实例,结果导致Bmw prototype中的 constructor从丢失(ps: function创建后prototype已经有constructor值),
bmw1
对象在原型链中查询constructor的时候指向了构造函数Car
,这明显是错误的。因此这里修正了Bmw.prototype.constructor = Bmw
。同时还可以通过proto获取Car的构造函数。
bmw1.__proto__.__proto__.constructor === Car