任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__
当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表。。
在数据结构中学过链表不,链表中有一个位置相当于指针,指向下一个结构体。
于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型。
文字说起来有点儿绕,看图说话
复制代码 代码如下:
var foo = {
x: 10,
y: 20
};
当我不指定__proto__的时候,foo也会预留一个这样的属性,
如果有明确的指向,那么这个链表就链起来啦。
很明显,下图中b和c共享a的属性和方法,同时又有自己的私有属性。
__proto__默认的也有指向。它指向的是最高级的object.prototype,而object.prototype的__proto__为空。
复制代码 代码如下:
var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate(30); // 60
理解了__proto__这个属性链接指针的本质。。再来理解constructor。
当定义一个prototype的时候,会构造一个原形对象,这个原型对象存储于构造这个prototype的函数的原形方法之中.
复制代码 代码如下:
/ a constructor function function Foo(y) { // which may create objects // by specified pattern: they have after // creation own "y" property this.y = y; } // also "Foo.prototype" stores reference // to the prototype of newly created objects, // so we may use it to define shared/inherited // properties or methods, so the same as in // previous example we have: // inherited property "x" Foo.prototype.x = 10; // and inherited method "calculate" Foo.prototype.calculate = function (z) { return this.x + this.y + z; }; // now create our "b" and "c" // objects using "pattern" Foo var b = new Foo(20); var c = new Foo(30); // call the inherited method b.calculate(30); // 60 c.calculate(40); // 80 // let's show that we reference // properties we expect console.log( b.__proto__ === Foo.prototype, // true c.__proto__ === Foo.prototype, // true // also "Foo.prototype" automatically creates // a special property "constructor", which is a // reference to the constructor function itself; // instances "b" and "c" may found it via // delegation and use to check their constructor b.constructor === Foo, // true c.constructor === Foo, // true Foo.prototype.constructor === Foo // true b.calculate === b.__proto__.calculate, // true b.__proto__.calculate === Foo.prototype.calculate // true );
http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
相关推荐
通过掌握原型链的概念和工作原理,开发者可以更好地利用 JavaScript 的面向对象特性。 这是一个可编辑的xmind文件,对原型链有清晰的勾画,不同的链用不同颜色进行了标识,内容一目了然,可以帮助快速学习原型链。
这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto、...
这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto、...
于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型。 文字说起来有点儿绕,看图说话 代码如下: var foo = { x: 10, y: ...
8.5.2 原型查找链 8.5.3 使用原型为对象添加方法 8.5.4 所有对象都有的属性和方法 8.5.5 创建子类及继承 8.6 应知应会 练习 第9章 JavaScript核心对象 9.1 什么是核心对象 ...
制图表-Minecraft的设计工具和原理图编辑器 我在2014年执行的Drafting Table项目是一个创建Web应用程序的项目,该项目可协助Minecraft视频游戏中的构建计划。 我原本希望以某种方式将其商业化,但是并没有引起社区...
1.JavaScript章节包括:基础知识、ES6、原型与原型链、作用域链闭包、异步编程等。 2.Vue章节包括:Vue基础、生命周期、组件通信、路由、Vuex、Vue3.0、虚拟DOM。 3.计算机网络包括:HTTP协议、HTTPS协议、HTTP状态...
6.3.2 蹦床原理以及回调120 6.4 递归是一个底层操作121 6.5 总结122 第7章 纯度、不变性和更改政策123 7.1 纯度123 7.1.1 纯度和测试之间的关系124 7.1.2 提取纯函数125 7.1.3 测试不纯函数的属性126 7.1.4 纯度与...
编程思维和基本算法的理解:新手开发者可能会因为对基础算法、数据结构理解不足,在面对复杂的前端编程思维如原型链、闭包、作用域链等问题时感到困扰。 计算机科学基础:对计算机体系结构、操作系统原理、网络通信...
原型链和原型链继承 防抖节流 new操作符 react-hook使用注意事项 深浅拷贝 网络防攻击 websoket相关 事件循环 浏览器相关 cmd还有amd等区别 js事件和冒泡机制 css相关 相关的打字稿 框架(包) 快速-> koa koa-...
借用原型链实现继承 function Parent2(){ this.name = "parent2"; this.play = [1,2,3]; } function Child2(){ this.type = "child2"; } Child2.prototype = new Parent2(); 缺点:原型对象的属性是共享的 组合式...
poser-collection 通过使用和扩展来自不同执行上下文的Array构造函数和原型。 这是 描述 Poser 工作原理的 。 npm install poser-collection 方法 原生数组方法 Fast.js 迭代方法 为每个 地图 筛选 减少 减少...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...