一直致力于使用ES6写ReactNative,对之前的Javascript了解较层面。所以,趁疫情机会抽出时间来对JavaScript 解释原型链(原型继承)
深入理解下。
·原型(prototype):
一个简单的对象,用于实现对象的属性与能力的继承。在 Firefox 和 Chrome 中,每个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它的父亲(该对象的原型),以obj.__proto__进行访问。
·构造函数:
可以通过new来 新建一个对象 的函数。
·实例:
通过构造函数和new创建出来的对象,便是实例。 实例通过__proto__指向原型,通过constructor指向构造函数。
上面的这张图我觉得是具有非凡意义的,能够系统直观的给我们展示JS原型继承系统的模式。
遵照上图手动编写对应的代码,并执行来验证上面的图所带给我们的意义!
图示有表示:对象实例 f1 的原型指针(_proto) 指向原型对象
在VSCode 终端(node环境下)执行命令:node .\JS-Test\js-test.js
可以看到,图示和编码验证是一致的。
图示有表示:每个构造函数(Foo)都有一个原型对象(prototype
),原型对象(Foo.prototype)都包含一个指向构造函数的指针(constructor
)
承接上面的验证,继续编写代码第8、9行 ~
在VSCode 终端(node环境下)执行命令:node .\JS-Test\js-test.js
可以看到,图示和编码验证依然是一致的。
图示上来看,Foo.prototype 是 Object 的对象实例
即 Foo.prototype的原型指针 指向 Object.prototype
承接上面的验证,继续编写代码第11、12和13行 ~
在VSCode 终端(node环境下)执行命令:node .\JS-Test\js-test.js
可以看到,图示和编码验证依然是一致的。
图示上来看,JavaScript中的对象,追根溯源都是来自一个Null对象 ?
即Object.prototype 是 Null的对象实例[Object继承自Null]
承接上面的验证,继续编写代码第15、16和17行 ~
在VSCode 终端(node环境下)执行命令:node .\JS-Test\js-test.js
可以看到,图示和编码验证依然是一致的!
结合上图以及手动编码,突然产生了疑惑并在这里再次编码验证解疑:
什么疑惑?f1.prototype 和 Foo.prototype 有什么关系、区别!
在VSCode 终端(node环境下)执行命令:node .\JS-Test\js-test.js
由下面结果可以看到 f1.prototype 不存在,则f1.prototype.constructor也是不存在的!
function Foo() {}
let f1 = new Foo();
function MyFunction() {}
let mf1 = new MyFunction();
f1.prototype = mf1;
//MyFunction 隐式的 继承(extends) 了Object
从上面编码的验证,可知我们通过
__proto__
可以访问到它所继承的原型对象。
从上面的代码块,可知:
** 解释原型链 **
如果我们让Foo的原型对象(f1.prtotype)等于MyFunction的对象实例,那么
一个函数(Foo)的原型对象(f1.prototype)将会包含(拥有)一个指向某函数原型(MyFunction.prototype)的原型指针(__proto__
),即f1.prototype.__proto__ === MyFunction.prototype
。相应的某函数原型(MyFunction.prototype)中也会有一个指向另外一个函数原型(Object.prototype)的指针(__proto__
); 此时如果MyFuction的原型对象(MyFunction.prototype)又变成另外一个函数的对象实例,那么这个原型链就被衔接住啦
参考文章:
参考https://juejin.im/entry
参考https://juejin.im/post
参考https://juejin.im/post