浅析JS原型链

实例对象

说到这里。我们另外再来提一提另一个东西: 构造函数。那既然提到了构造函数由不得不提普通函数了。

先来讲一下构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。

例如：

let Num = function Num() {this.add = function (a, b) {return a + b}
}let n = new Num()
console.log(n.add(1, 2));

这里实例对象已经出来了。就是在你new 这个构造函数的时候。就已经创建了实例对象在本文中 n就是一个实例对象

**这里简单说一下实例对象在创建成功时会发生什么变化。

在内存中创建一个新的空对象；
让this指向这个新的对象。这里this指向问题我只用一句话就能总结： 谁调用this就指向谁
执行构造函数里面的代码，给这个新对象添加属性和方法；
返回这个新对象（所以构造函数里面不需要return）。

再来讲一下普通函数

普通函数就是… 就是最普通的函数例如

function add(a, b) { return a+b };
add(1,2)

虽然上述两种方式。都能得到结果 3

但是两种声明以及使用的方式都不一样。

那这里总结下区别

构造函数首字母要大写，类似于python中的类
构造函数是通过new操作符来创建实例对象的，而普通函数则不需要。

这里还有个点。

实例对象创建成功后已经有了一个__proto__的内置属性了。

而构造函数本身有个属性是prototype 称之为对象原型

原型对象

原型对象是构造函数上的一个属性，用来创建公共的方法。也就是prototype

举个例子。

直接创建个构造函数。然后赋值个方法。

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {this.name = name
}// 赋值公共方法
Animal.prototype.eat = function () {console.log(`${this.name}在吃饭`)
}let dog = new Animal("狗")
let cat = new Animal("猫")
dog.eat()
cat.eat()
console.log(dog.eat === cat.eat)    // true

结果

狗在吃饭
猫在吃饭
true

这里扯到了原型对象那就再讲讲另一个概念对象原型。其实这个概念可以忽略不计。

对象原型

**对象原型是实例对象(对象)身上的一个属性, 该属性为 _proto_ **

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {this.name = name
}// 赋值公共方法
Animal.prototype.eat = function () {console.log(`${this.name}在吃饭`)
}let dog = new Animal("狗");console.log(dog.__proto__);
console.log(dog.__proto__ === Animal.prototype);

结果

{ eat: [Function (anonymous)] }
true

短暂总结一下

这里捋一下关系

每个构造函数都有一个原型对象原型对象的(prototype)
__proto__等于其构造函数的prototype,即每个__proto__都指向其构造函数的prototype
原型对象(prototype) == 对象原型(__proto__)

constructor

construct是原型对象(prototype) 和对象原型(__proto__)身上的一个属性

而 constructor会记录当前对象属于哪个构造函数。

这里举个例子吧、

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {this.name = name
}// 赋值公共方法
Animal.prototype.eat = function () {console.log(`${this.name}在吃饭`)
}let dog = new Animal("狗");dog.constructor.prototype
console.log(dog.constructor.prototype)