【JS】三句话讲明白原型和原型链

98 阅读2分钟

原型和原型链

要想学会原型和原型链,记住这三句话:

1.每一个函数都天生自带一个prototype属性,其属性值是一个对象,里面存储的就是当前类的实例的公有的属性和方法。(原型)

2.每一个原型天生自带一个constructor属性,其属性值指向当前的类

3.每一个对象天生自带一个 proto 属性,其属性值指向当前所属的类的原型

函数和对象

函数:

  • 普通函数
  • 构造函数
  • 内置类:Array、Number ...

对象:

  • 普通对象、数组、正则、日期...
  • 实例也是对象
  • prototype 原型也是对象
  • proto 也是对象
  • 函数也是对象
  • ...
  • 总而言之,万物皆对象

创建实例的两种方式

  • 字面量的方式
  • 构造函数的方式

** 下面以数组为例**

1.字面量的方式:

var ary =[1,2,3];
console.log(ary);

//=>[1,2,3]

2.构造函数的方式:

var ary = new Array(1,2,3);
console.log(ary);

//=> [1,2,3]

只写一个值代表设置数组的长度

var ary = new Array(3);
console.log(ary);

//=>空数组 但是占了三个位置 [empty*3] length : 3

ary[0] = 1;
ary[1] = 2;
ary[2] = 3;

console.log(ary);

//=> [1,2,3]

以数组为例解释原型链

Array 是一个内置类,它的原型 prototype 里面存储着数组的公有的内置的属性和方法,每一个创建出来的具体的数组都是实例,所以每个数组都有一个____proto____ 属性,每个数组都可以通过这个属性找到自己所属类 Array 的原型,可以调用原型上的公有属性和公共方法,比如 push 这个方法就在 Array 的原型上面,每个数组都可以调用 push 这个方法。而 Array 的原型里面还有一个 constructor 属性,属性值指向的是 Array 这个类。

实例通过____proto____ 属性找到所属类的原型,并且可以调用其原型上的属性和方法,这个机制就叫做原型链。

注意:

Object是一个内置的基类,所有的对象通过原型链机制,最终都可以指向 Object 的原型,而 Object 原型中也有____proto____ 属性,但它的属性值是 null 。

console.log(Object.prototype.__proto__);

//=> null

如果一个实例调用一个方法,会先查看自己有没有私有的这个方法,如果没有,再通过原型链机制向所属类的原型上去找,找不到的话继续向上级查找,一直找到 Object 这个基类的原型。