JavaScript 原型链、prototype、__proto__详解

简介: 1、背景 Javascript的继承模型、原型链等等概念比较晦涩难懂, 很多人过去在使用Javascript的时候并没有刻意去搞明白其中的原理,今天笔者一步一步分析一下JavaScript中的继承、原型链、prototype、__proto__。

1、背景

Javascript的继承模型、原型链等等概念比较晦涩难懂, 很多人过去在使用Javascript的时候并没有刻意去搞明白其中的原理,今天笔者一步一步分析一下JavaScript中的继承、原型链、prototype、__proto__。 笔者并不打算写过多的文字解释原理,而是希望将原理总结成代码片段更便于理解。

2、JavaScript继承是如何实现的?

     你只需要知道JavaScript 是通过名叫原型链的东西来实现继承的,依托于constructor.prototype属性(构造函数的prototype属性)即可。 你现在并不需要明白原型链是什么东西我会在下面一步一步详解。

3、 javascript通过prototype实现继承

function Animal() {
   this.echo=function () {
       console.log('I am An Animal....')
   };
   this.value=1;
}
function Monkey() {

}
//将构造函数Monkey的prototype属性设置为一个Animal的对象,Monkey就拥有了Animal的所有属性和方法
Monkey.prototype=new Animal();
new Monkey().echo();
console.log(new Monkey().value);

4、prototype、__proto__解析区别

我们知道在JavaScript中我们可以通过new 创建一个对象,我们是根据一个函数模板创建一个对象。也就是说如下代码
Animal函数便是函数模板,类似C++/java等的类的概念,然而 new Animal出来的就是对象的概念。
function Animal() {
   this.echo=function () {
       console.log('I am An Animal....')
   };
   this.value=1;
}
prototype是在构造函数(函数模板),也就是上面的Animal上设置的属性, 通过设置这个属性我们可以实现 继承。
__proto__属性是对象的一个属性,在ECMAScript规范中是不暴露的,但是有些浏览器可以访问到,对象的这个属性值就是函数模板的prototype值,
不知道这样说是不是不容易理解,换一个方式吧 :对象.__proro__===函数模板.prototype,前提这个对象时 这个函数new出来的。 

5、通过设置上下文this的方式实现继承

  我们都知道函数中在可以使用this引用当前上下文, 下面这段代码就是通过设置构造函数的上下文this的方式实现了继承,下面我给出两段代码分别仔细阅读下,琢磨一下代码所表达的意思。

代码1
function Animal() {
    this.echo=function () {
        console.log('I am An Animal....')
    };
    this.value=1;
}
//创建一个字面对象 三个方式都创建了对象
var obj1=new function () {};
var obj2={};
var obj3=[]
//分别将三个对象设置成Animal构造函数的上下文 并且调用Animal函数,那么这个时候Animal函数中的this=obj1,obj2,obj3
Animal.call(obj1);
Animal.call(obj2);
Animal.call(obj3);
obj1.echo();
obj2.echo();
obj3.echo();
代码2
function Animal() {
    this.echo=function () {
        console.log('I am An Animal....')
    };
    this.value=1;
}

function  Monkey() {
    Animal.call(this);
}
new Monkey().echo();

6、什么是原型链?


  这个概念其实比较好理解,如果我们调用一个对象的一个方法,如何这个方法不存在那么就回去他的__proto__寻找,如果找到直接返回,如果没找到那么继续__proto__.__proto__中寻找,就像如下代码这样, B是如何找到value的。

代码1
var A={value:1};
var B={};
B.__proto__=A;
console.log(B.value);

代码2
function A() {
    this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().__proto__.value);

代码3
function A() {
    this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().value);


7、总结一些关于JavaScript 继承、类型判断 、prototype的用法

判断一个字面定义数组的原型的类型,输出是[object Array]
Object.prototype.toString.call([1].__proto__)
下面演示了数组和对象的关系, 原型链 []->Array->Object 下面返回true
Object.prototype===[].__proto__.__proto__
调用字面数组的Object 原型的toString方法输出[object Object]
[].__proto__.__proto__.toString()
直接调用Object原型方法toString 输出[object Object]
Object.prototype.toString([])
通过call调用toString方法并且设置上下文获取真实类型
console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call(/x/));
console.log(Object.prototype.toString.call(/x/));
console.log([].__proto__.__proto__.toString.call(/x/ig));
console.log([].__proto__.__proto__.toString.call(null));
输出结果
[object Array]
[object RegExp]
[object RegExp]
[object RegExp]
[object Null]


参考文档 
MDN 

目录
相关文章
|
28天前
|
JavaScript 前端开发
谈谈对 JavaScript 中的原型链的理解。
JavaScript中的原型链是实现继承和共享属性的关键机制,它通过对象的`prototype`属性连接原型对象。当访问对象属性时,若对象本身没有该属性,则会查找原型链。此机制减少内存占用,实现代码复用。例如,实例对象可继承原型对象的方法。原型链也用于继承,子类通过原型链获取父类属性和方法。然而,原型属性共享可能导致数据冲突,且查找过程可能影响性能。理解原型链对JavaScript面向对象编程至关重要。如有更多问题,欢迎继续探讨😊
18 3
|
28天前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
23天前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
21 0
|
26天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
26 1
|
27天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
28天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
25 2
|
28天前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。
|
28天前
|
JavaScript 前端开发
JavaScript原型链:工作原理与深入探究
【4月更文挑战第22天】JavaScript原型链是对象属性查找的关键,它通过对象间的链接形成链式结构。当访问属性时,JS从对象自身开始查找,若未找到则沿原型链向上搜索,直至`null`。原型链用于继承、扩展内置对象和实现多态,但要注意避免修改内置对象原型、控制链长度及使用`Object.create()`创建对象。理解并合理运用原型链能深化JS面向对象编程的理解。
|
28天前
|
JavaScript
什么是js的原型链
什么是js的原型链
|
28天前
|
JavaScript 前端开发
深入探讨JavaScript中的原型链与继承机制
JavaScript作为一种灵活而强大的编程语言,其独特的原型链与继承机制是其核心特性之一。本文将深入探讨JavaScript中的原型链与继承机制,从基础概念到实际应用,帮助读者更好地理解和利用JavaScript的继承特性。