js原型和原型链

Winer 发布于2019-08-23 12:26 / 1396人阅读

摘要：几乎所有对象在创建的时候都会生成链，就是人们常说的原型链，当你试图引用对象的属性时，会触发对象的操作，对于默认的操作来说，第一步就是去查找当前的对象中有没有你要引用的属性，如果有就会使用它，如果没有找到，就会去查找这个对象的原型链，举个例子

[[Prototype]]

几乎所有对象在创建的时候都会生成[[Prototype]]链，就是人们常说的原型链，当你试图引用对象的属性时，会触发对象的[[Get]]操作，对于默认的[[Get]]操作来说，第一步就是去查找当前的对象中有没有你要引用的属性，如果有就会使用它，如果没有找到，就会去查找这个对象的原型链，举个例子：

var one = {
  type: "one"
}

var two = Object.create(one)

console.log(two.type) // one

在上述例子中，two对象中并没有type属性，但是由于Object.create（创建一个新对象，带着指定的原型对象和属性）将one对象和two对象联系到一起，因此在原型链的查找过程中，即便在two对象中没有找到type属性，会继续向上查找，在one对象中查找到type属性并打印，如果沿着原型链一直向上查找都没有找到，则会打印undefined

prototype

要讲清楚prototype是什么先举一个简单的例子：

function origin(type) {
  this.type = type
  console.log(this.type)
}
origin.prototype.name = "origin"
var son1 = new origin("male")
var son2 = new origin("male")
console.log(son1.name) // origin
console.log(son2.name) // origin

函数origin的prototype属性实际上相当与一个对象，这个对象指向实例son1和son2的原型对象，因此，当调用name属性，会沿着原型链一直向上找，输出origin.prototype.name的值，简单来说，函数的prototype对象会指向实例的原型，从另一个角度上来说，也可以说son1和son2继承了函数origin的prototype对象

constructor

先看一个简单的例子：

function origin() {

}
const son = new origin()
console.log(origin.prototype.constructor === origin) // true
console.log(son.constructor === origin) // true

origin.prototype默认有一个公有并且不可枚举的属属性，constructor，并且这个属性引用的是对象关联的函数，因此origin.prototype.construct = origin，同时实例对象son也有一个construcor属性，指向创建这个对象的函数

_proto_

__proto__其实是一个绝大多数浏览器支持的用来访问内部原型链的一个属性

    son.__proto__ === origin.prototype // true

当调用son.__proto__实际上调用了son.__proto__()，返回值和Object.getPrototypeOf(origin)结果相同

云服务器 GPU云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98527.html

JS基础-原型、原型链真的不能一知半解

摘要：原型链和对象的原型是对象实例和它的构造函数之间建立的链接，它的值是构造函数的。对象的原型根据上文提到的构造调用函数的时候会创建一个新对象，自动将的原型指向构造函数的对象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清...

changfeng1050 2019-08-26 11:00 评论0 收藏0
js 的原型原型链原型链的继承

摘要：图片描述缺点是无法实现多继承可以在构造函数中，为实例添加实例属性。对象的方法 Object.assign() 对象可以简写，如果 key 和 value 相等则可以简写 let name = xm; let age = 2; let obj = { name， age, fn(){ // 可以省略函数关键字和冒号： console.log(2...

soasme 2019-08-26 10:13 评论0 收藏0
从实现角度分析js原型链

摘要：从实现角度分析原型链欢迎来我的博客阅读从实现角度分析原型链网上介绍原型链的优质文章已经有很多了，比如说作为补充，就让我们换个角度，从实现来分析一下吧本文假设你对原型链已经有所了解。从实现角度分析js原型链欢迎来我的博客阅读：《从实现角度分析js原型链》网上介绍原型链的优质文章已经有很多了，比如说： https://github.com/mqyqingfeng/Blog/issu...

CompileYouth 2019-08-20 19:04 评论0 收藏0
温故js系列（15）-原型&原型链&原型继承

摘要：给添加属性给的原型对象添加属性原型链在中，每个对象都有一个属性，其保存着的地址就构成了对象的原型链。实例变量实例函数原型链继承有了原型链，就可以借助原型链实现继承。是中唯一一个处理属性但是不查找原型链的函数。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：原型&原型链&原型继承 JavaScript-原...

Ethan815 2019-08-22 10:37 评论0 收藏0
JS面向对象的程序设计之继承的实现 - 原型链

摘要：简单回顾一下构造函数原型和实例对象之间的关系每个构造函数都有一个原型对象。找到生成构造函数的原型对象的构造函数，搜索其原型对象，找到了。 JS面向对象的程序设计之继承的实现 - 原型链前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。如有纰漏或错误，会非常感谢您的指出。文中绝大部分内容引用自《JavaS...

zhaochunqi 2019-08-23 12:22 评论0 收藏0
【前端基础进阶】JS原型、原型链、对象详解

摘要：二构造函数我们先复习一下构造函数的知识上面的例子中和都是的实例。这两个实例都有一个构造函数属性，该属性是一个指针指向。原型链其中是对象的实例。一. 普通对象与函数对象 JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 评论0 收藏0