简述js原型链

基本概念

1.、js的对象可以分为函数对象和普通对象，每个对象都有proto属性，但是只有函数对象才有prototype属性（prototype=原型对象）

2、Object是*的函数对象，Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象，我们自己手写的function是再低一级的函数对象

3、proto是一个对象，它指向某一个prototype，并且有2个属性：constructor和proto

原型链的作用

1、共享属性（面向开发者）

先来看第一种写法

function Person(name) {
    this.name = name
}

var p1 = new Person('x')
p1.sayName =  function() {
    console.log(this.name)
}

var p2 = new Person('y')
p2.sayName =  function() {
    console.log(this.name)
}

我们声明了一个构造函数Person，并为它的2个实例都定义了sayName方法

如果我们希望所有的实例都有sayName方法，减少重复的定义

可以像下面这么写：（第二种写法）

function Person(name) {
    this.name = name
    this.sayName() = function() {
        console.log(this.name)
	}
}

var p1 = new Person('x')
var p2 = new Person('y')

我们在构造函数Person中定义了一个数据成员和一个函数成员

每当我们创造一个新的Person实例时，都会在内存中单独为它分配私有的空间

也就是说，p1和p2都有自己的name属性和sayName方法

这个name属性和sayName方法是实例自己私有的

在控制台直接打印p1得到如下结果：（第一、第二种写法是等价的）

再来看第三种写法：

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

var p1 = new Person('x')
var p2 = new Person('y')

这样的话，每个Person实例依然都会有name属性和sayName方法

不同的地方在哪呢？

在控制台直接打印p1得到如下结果：

不难发现，当前这种写法是将sayName定义在Person的原型对象上的

也就是说，sayName方法不再是每个Person实例私有的，而是所有Person实例共享的

这样做既不影响每个实例打印/输出自己的name值，又可以节省内存

2、面向编译器

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

var p1 = new Person('x')
p1.sayName()

还是相同的例子

当我们在程序中调用 p1.sayName方法时，编译器会沿着原型链(自底向上)地寻找原型对象上是否有这个方法

简述js原型链

如上图所示，编译器会先从p1自身（最外层）开始找

然后去 p1.proto（即Person的原型对象 = 外层红色方框）里面找

最后再到 p1.proto.proto（即Object的原型对象 = 内层红色方框）里面找

基本概念

原型链的作用

1、共享属性（面向开发者）

2、面向编译器

相关推荐