深入浅出，JS原型链的工作原理

Ali_ 发布于2019-08-23 13:52 / 1658人阅读

摘要：前言原型链，即原型链条。原型的作用在中，每个对象都有自己的原型。访问的属性方法依旧不存在于该原型，则会继续访问该原型的原型

前言：原型链，即原型链条。它是由原型、原型的原型、原型的原型的原型...这一规则组合成的，经常被应用于继承。

原型的作用
在JS中，每个对象都有自己的原型。当我们访问对象的属性和方法时，JS会先访问对象本身的属性和方法。如果对象本身不包含这些属性和方法，则访问对象对应的原型。

function Person(name,age){
    // 对象自身的属性
    this.name = name;
    this.age = age;
    
    // 对象自身的方法
    this.sayName = function(){
        alert(this.name);
    };
}

//原型上的方法
Person.prototype.sayAge = function(){
    alert(this.age)
}

var xiaoming = new Person("XiaoMing",12);
var xiaoHong = new Person("XiaoHong",11);

// 调用自身不存在的方法
xiaoming.sayAge(); // 12
xiaoHong.sayAge(); // 11

上述例子中，方法“sayAge”是在原型上而非对象中。（关于对象与原型之间更为详细的内容，可阅读文章：《浅谈JS中的构造函数、原型对象(prototype)、实例中的属性/方法之间的关系》）

原型链的原理
原型自身也是一个对象（默认情况下所有对象都是Object的实例)。

alert(xiaoming instanceof Object); // true
alert(Person.prototype instanceof Object); // true

每个对象都有自己的原型，所以Person的原型也有它自己的原型，那就是：Object.prototype(部分浏览器允许通过实例的“__proto__”属性访问其原型)

alert(Person.prototype.__proto__ == Object.prototype); // true

既然原型是一个对象，那么，当我们访问的属性和方法在原型不存在，就会继续访问原型的原型，直至Object.prototype。

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert(this.name);
    };
}
Person.prototype.sayAge = function(){
    alert(this.age)
}

// 在Object.prototype增加一个“自我介绍”的方法
Object.prototype.introduce = function(){**
    alert("My name is " + this.name + ",I"m " + this.age + " years old!")
}

var xiaoming = new Person("XiaoMing",12);
// 调用对象自身和原型上均不存在的方法
xiaoming.introduce(); // My name is XiaoMing,I"m 12 years old!

总结
原型链是JS的一个特性，它实现的核心机制是：
1、访问对象的属性(方法)时，若对象本身不存在该属性(方法)，则会转向访问该对象的原型；
2、对象的原型也是一个对象。访问的属性(方法)依旧不存在于该原型，则会继续访问该原型的原型...

云服务器 GPU云服务器 js原型链的继承工作原理网络工作原理爬虫工作原理

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

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

关于个人第一天前端面试的面试问答QA，希望能对其他找前端工作的朋友有所帮助。

摘要：两日前，发了一篇吐槽，莫名的火了一把。关于的第一个，其实就是声明一个常量，不允许变更。另外对象迭代这里出自，阮一峰大神写的入门指南，对象篇。两日前，发了一篇吐槽，莫名的火了一把。经过大家的建议与鼓励，于是修改了简历，开始了重新投递，2天后接到第一份面试邀请。此文为个人面试经历，QA问答过程与总结，不透露面试公司及面试人员，内容真实，如果有面试过我的大佬看到博客，欢迎指出问题。循序...

Youngdze 2019-08-20 15:29 评论0 收藏0
高性能JavaScript阅读简记（一）

摘要：对于直接量和局部变量的访问性能差异微不足道，性能消耗代价高一些的是全局变量数组项对象成员。当一个函数被创建后，作用域链中被放入可访问的对象。同样会改变作用域链，带来性能问题。早前阅读高性能JavaScript一书所做笔记。一、Loading and Execution 加载和运行从加载和运行角度优化，源于JavaScript运行会阻塞UI更新，JavaScript脚本的下载、解析...

sorra 2019-08-01 17:19 评论0 收藏0
高性能JavaScript阅读简记（一）

摘要：对于直接量和局部变量的访问性能差异微不足道，性能消耗代价高一些的是全局变量数组项对象成员。当一个函数被创建后，作用域链中被放入可访问的对象。同样会改变作用域链，带来性能问题。早前阅读高性能JavaScript一书所做笔记。一、Loading and Execution 加载和运行从加载和运行角度优化，源于JavaScript运行会阻塞UI更新，JavaScript脚本的下载、解析...

zhangrxiang 2019-08-20 18:29 评论0 收藏0
JS 执行上下文栈 / 作用域链

摘要：每一个执行上下文可以访问的对象包括自身的作用域和父执行上下文的作用域和父父执行上下文作用域直到全局作用域，这就产生了作用域链。语句结束后，作用域链恢复正常。 0、自己理解代码执行或函数调用生成执行上下文(只有当前执行上下文有执行权)，该执行上下文内只能访问当前执行上下文的变量、函数和上一级执行上下文中的变量、函数，激活下一个执行上下文的时候执行权转移到新的执行上下文，形成执行上下文栈...

yunhao 2019-08-22 11:14 评论0 收藏0