javascript---自己对原型链的小理解

Sanchi 发布于2019-08-20 11:32 / 3172人阅读

摘要：原型的作用通过构造函数创建的对象，可以使用原型上的属性和方法，即原型可以让实例共享它的方法和属性。

1、什么是原型？

原型是函数自带的一个属性prototype，该属性的值指向一个对象 ( 因为存的是对象的指针 )。

2、原型的作用

通过构造函数创建的对象，可以使用原型上的属性和方法，即原型可以让实例共享它的方法和属性。

function Car(brand) { 
    this.brand = brand;
}

// 原型
Car.prototype.drive = function() {
    console.log("开车");
} 

// 创建对象(实例)
var x3 = new Car("BMW");
var glc300 = new Car("Benz");

// 两个实例都可以访问原型上的方法
x3.drive();
glc300.drive();

3、prototype

函数默认就有的属性，这个属性指向原型(原型对象)。

4、__proto__

对象默认就有的属性，这个属性也指向原型(原型对象)。

5、原型的称呼问题

prototype 这个属性, 我们称之为原型属性, 或者显示原型
.__proto__ 这个属性, 我们称之为原型对象, 或者隐式原型

6、prototype和__proto__的区别

它们两个是不同的属性

prototype是函数的属性，它存的是对象的指针，指向原型对象

函数中prototype的作用：

将来创建的实例对象的__proto__属性会根据构造函数的prototype属性来定义。

__proto__是对象的属性，它也指向原型

对象中__proto__的作用：

对象可以访问__proto__属性所指向的那个原型对象中的属性和方法

7、constructor

所有原生的原型都有这个属性，该属性的值存的是构造函数的指针（地址）

因为构造函数.prototype 的值可以被改变，所以修改之后就不是原生原型了。

    function Car(brand) { 
        this.brand = brand;
    }

    // 原型
    Car.prototype.drive = function() {
        console.log("开车");
    } 

    // 创建对象(实例)
    var x3 = new Car("BMW");

    // 可以获取对象的具体类型
    console.log(x3.constructor.name);    // 输出Car

    // 动态修改原型的属性, 尽量不要这么干, 最好一次性在最初就定义好
    Car.prototype.drive = function() {
        console.log("飚车");
    }

8、原型链

javascript中的对象都有一个内置的proto属性，这个属性指向创建该对象的构造函数的prototype（Fucntion.prototype-原型对象），这个原型对象也是对象，也会有自己的proto，指向它自己的原型对象，这样直到某个对象的原型为null为止，这样的一级一级的链结构就称为原型链。

  // 实例对象f的原型 指向 原型对象F.prototype
  f.__proto__   =>   F.prototype, 
  
  // 原型对象F.prototype的原型 指向 原型对象Object.prototype
  F.prototype.__proto__   =>   Object.prototype，
  
  // 原型对象Object.prototype的原型 指向 null
  Object.prototype.__proto__   =>   null

原型链的作用就是用来实现继承（继承：对象可以使用不属于自己的属性或者方法）；
当访问一个对象的属性或者方法时，首先会在对象的自身查找，
如果没有，则根据该对象的proto属性的指向，到该对象的原型对象上查找，
如果还没有找到，就再根据原型对象的proto去查找，一直到Object.prototype为止。

举个栗子

var arr = [];
console.log(arr.hasOwnProperty("push"));                 // false
console.log(Array.hasOwnProperty("push"));               // false
console.log(Array.prototype.hasOwnProperty("push"));     // true     
console.log(arr.push === Array.prototype.push);          // true

比如我们创建一个数组, 数组arr本身是没有push方法的, push方法就是从数组的原型对象上继承而来的.

最后是一张原型继承结构的图

海外云主机私有云 js原型链的继承关于区块链的小故事 javascript原型国家对区块链的态度

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

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

如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
JavaScript 原型系统的变迁，以及 ES6 class

摘要：一般我们对这种构造函数命名都会采用，并把它称呼为类，这不仅是为了跟的理念保持一致，也是因为的内建类也是这种命名。由生成的对象，其是。这是标准的规定。本文的主题是原型系统的变迁，所以并没有涉及和对原型链的影响。概述 JavaScript 的原型系统是最初就有的语言设计。但随着 ES 标准的进化和新特性的添加。它也一直在不停进化。这篇文章的目的就是梳理一下早期到 ES5 和现在 ES6，...

chuyao 2019-08-22 11:59 评论0 收藏0
我所认识的JavaScript作用域链和原型链

摘要：为了防止之后自己又开始模糊，所以自己来总结一下中关于作用域链和原型链的知识，并将二者相比较看待进一步加深理解。因此我们发现当多个作用域相互嵌套的时候，就形成了作用域链。原型链原型说完了作用域链，我们来讲讲原型链。　　毕业也整整一年了，看着很多学弟都毕业了，忽然心中颇有感慨，时间一去不复还呀。记得从去年这个时候接触到JavaScript,从一开始就很喜欢这门语言，当时迷迷糊糊看完了《J...

Bmob 2019-08-20 17:36 评论0 收藏0
javascript-从toString方法在判断复杂数据类型上的妙用，引申到对原型链的理解

摘要：所以，当我们使用时，不能进行复杂数据类型的判断，因为它调用的是，虽然也继承自，但在上重写了，而我们通过实际上是通过原型链调用了。关于 toString 方法在有关js的开发中使用应该是相当广泛的，这两天在看jQuery的源码，从 toString 本身了解与巩固了不少知识，写出来与大家一同分享。首先先上一段代码： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 评论0 收藏0