十行代码理解JS原型链
在记单词中, 我们更希望这个单词能被拆解成几个更短更易记的单词以方便我们记忆与理解.
理解代码也是一样, 我推荐的学习方式不是去记住某个新的概念, 而是将这个概念转换为更简单的基础概念再理解.
(就像计算机只需要能理解01就能理解万物)
说回原型链, 这篇文章将用代码实现原型链的部分功能, 将它的语法转换为基础代码来理解.
为了提起你的胃口, 我们先来看看最终代码, 然后在继续深入理解.
function F(){}
F.common = {age: 1} // 给F的`原型`上添加一个变量
// 此方法返回一个对象, 对象的common指向了F.common.
function New(f){
let o = {}
f.bind(o)()
o.common = f.common
return o
}
let f = New(F);
// 现在就能通过f访问到age了
console.log(f.common.age) ; //1
以上代码没有用到任何一个新关键字, 所以很好理解吧. 它是不是和原型链很像呢? 那原型链和它又有什么区别?
接下来慢慢看
什么是原型链
将实例与原型之间的链条, 就叫原型链.
这个说法太书面啦, 我们不用理解这句话, 现在只需要理解原型链有什么存在的意义(作用), 最后就自然理解了它是什么.
它的目的之一就是让实例可以调用父级定义的方法
当然也可以每个实例都clone一次父级的方法, 但这太不优雅.
那么这又有什么作用?
举一个实际开发中的例子:
我们知道每个vue组件都是Vue的实例, 所以如果我们想在每个组件上都添加一个共用方法, 我们会怎么做?
如果有原型链的话就很简单, 只需要Vue.prototype.now = function(return new Date()), 现在所有的vue组件中, 你都有可以使用this.now()来调用这个方法.
('方法'也只是一个变量, 所以上面句子中的'方法'也可以替换为'变量', 只不过'方法'更容易让熟悉OO的同学理解到好处)
如果我们不用原型链, 那么怎么实现这个目的(让实例可以调用父级定义的方法)呢?
先来看看原型链是怎么做的, 想弄懂就得先模仿.
理解原型链
原型链的写法如下
function Person(){};
Person.prototype.age = 1; // 在Person原型上添加一个变量
console.log((new Person()).age); // 1
console.log((new Person()).__proto__.age); // 1
现在出现了3个新概念prototype, __proto__, new, 我们要理解的就是它们了.
prototype
直译是: 原型. 它是个什么东西呢?
记住: 它只是一个普通对象.
那么只是一个普通对象, 为什么取名叫prototype呢? 叫a可以不可以?
答案是可以的, 下面我们就将自己实现原型链
我们想为People实例添加一个age变量, 所以这样写:
(这里为了好看一点, 我们还是不叫它a了, 而是取名叫common)
function Person(){};
Person.common = {age: 1}
在js里, 万物都是对象, 函数也不例外, 所以这样(Person.common = xx)的赋值方式是可以的.
然后
console.log((new Person()).age) // undefined
: 明明就不行呀, 你骗我呢?
不要急, 这才说了一个, 它们三是相辅相成的.
new
new 做了什么事情呢?
还是得翻看一下资料
以new调用函数实际上会经历以下 4个步骤
(1) 创建一个新对象
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
(3) 执行构造函数中的代码（为这个新对象添加属性）
(4) 返回新对象。
将以上说明翻译成代码, 我们来自己实现一个初步的new
function New(f){
let o = {}
f.bind(o)()
return o
}
来检测一下代码:
function Person(){this.name = 'tom'}
console.log((new Person().tom)); // tom
console.log((New(Person).tom)); // tom
恩, 没问题, 现在知道new是个什么东西了吧?
它仅仅是让函数里的this指向了一个对象, 让你可以用this方便为对象添加变量.
再结合上一小节的代码
People.common = {age: 1}
再来运行一下
console.log(New(Person).age) // undefined
当然还是不行, 但只差最后一步.
__proto__
查一下资料
__proto__对象等于构造函数的原型对象.- 当调用实例的某个属性却找不到时, 就会自动调用
__proto__里的属性.
来吧, 继续翻译成代码
let p = New(Person);
// 注意这里是common
p.common = Person.common;
我们再继续定义age
// 这里的age就实现了自动调用common中的age
Object.defineProperty(p, "age", {
get: function () { return p._age || p.common.age },
set: function (value) { p._age = value }
});
console.log(p.age) // 1
p.age = 2
console.log(p.age) // 1
恩, 赋值操作的结果也和原型链是一样的.
现在p(实例)上是不是就可以访问Person上的变量了呢 这就是原型链的实现了.
实现原型链
整理一下上面代码
function F(){}
F.common = {age: 1} // 给F的`原型`上添加一个变量
// 此方法返回一个对象, 对象的common指向了F.common.
function New(f){
let o = {}
f.bind(o)()
o.common = f.common
return o
}
let f = New(F);
// 现在就能通过f访问到age了
console.log(f.common.age) ; //1
这差不多就是原型链了, 你会发现它不过就是对象赋值.
当然原型链也自带一个语法糖来简化代码: 当在对象当中找不到属性的时候, 会在原型上找
也就是上面的代码中 f.common.age的部分, 如果使用 f.__proto__.age的话, 就能简化为f.age.
这是语法层面的东西了, 我们无法模拟, 但对于整个原型链的知识, 我们只需要记住这一个特殊点就好了, 其他的你都能写出来了, 还能不理解吗?
结语
如此粗暴的理解方式可能会漏掉一些东西, 但我更喜欢show me the code的直接, 先让我脑海中有一个'框架', 再去慢慢细化它.
你可以继续参看其他资料, 希望有了这个'框架'之后不会再云里雾里.
