JavaScript的原型链一直是个我搞不懂的东西。包括我在写文章和画关系图的时候。
不知道是什么历史原因让js产生了如此复杂的继承关系。
记得以前玩游戏,有个技能叫:死亡缠绕。来形容这个很贴切。
直接上图,有问题欢迎指正!
画图是明确问题的很好方式,画了一遍图之后,清晰了不少。
总结点规律:
- 所有对象都在原型链上
- 除了null 每个对象都有且唯一的proto原型对象,即仅有一条原型链
- 只能访问原型链上的方法和属性
- f 由F new操作而来,看似他们关系很密切 ,其实f和F的原型链半毛钱关系没有,即F原型链上的方法属性f均不能访问。
new操作符到底做了什么?
以如下new操作为例:
function F(name) {
this.name = name;
}
const f = new F("test")
- 创建一个新对象
let instance = new Object();
- 创建instance原型链
instance.__proto__ = F.prototype;
- 在instance中执行F函数体
F.call(instance)
- 判断执行结果类型,如果为基础数据类型(undefined, null, number, string, Boolean)则返回instance,反之,则返回该对象
自己手动实现一个 newFunc:
function newFunc(func){
var instance = new Object();
if (func.prototype !== null) {
instance.__proto__ = func.prototype;
}
var result = func.apply(instance);
if ((typeof result === "object" || typeof result === "function") && result !== null)
{
return result;
}
return instance;
}
//测试
function F(){
this.a = "hahah"
}
let f = newFunc(F);//F {a: "hahah"}
关于最后一条可能不好理解,上几个例子:
function Person1(name) {
this.name = name;
}
function Person2(name) {
this.name = name;
return this.name;
}
function Person3(name) {
this.name = name;
return new Array();
}
function Person4(name) {
this.name = name;
return "hahah";
}
function Person5(name) {
this.name = name;
return function() {};
}
function Person6(name) {
this.name = name;
return String(1);
}
var person1 = new Person1('person1'); // 函数无返回,默认返回undefined{name: 'person1'}
var person2 = new Person2('person2'); // {name: 'person2'}
var person3 = new Person3('person3'); // []
var person4 = new Person4('person4'); // 'person4'
var person5 = new Person5('person5'); // function() {}
var person6 = new Person6('person6'); // name: "person6"