js 原型链

大家好，我是讯享网，很高兴认识大家。

1. 构造函数

//创建一个构造函数Star function Star(name, gender) { 
    this.name = name this.gender = gender this.sing = function () { 
    console.log('方法') } } var s1 = new Star('杜甫', '男') //s1就是实例出来的对象

讯享网

1.1 构造函数原型对象prototype

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，叫做原型对象,这个对象的所有属性和方法，都会被构造函数所拥有

讯享网 function Star(name, gender) { 
    this.name = name this.gender = gender this.sing = function () { 
    console.log('小呀嘛小二郎') } } // 为Star的原型对象添加方法(相当于将方法添加到Star的父类上去) Star.prototype.cry = function () { 
    console.log('can cry'); } Star.prototype.dance = function () { 
    console.log('can dance'); } //通过输出发现, 原型对象上确实有了cry方法console.log(star.prototype) // 那么作为原型对象的子类的 Star构造函数自然就拥有了cry方法 var s1 = new Star('杜甫', "男") s1.cry() s1.dance()

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。如

Vue.prototype.#axios=axios

1.2 对象原型

构造函数的prototype 属性获取的是当前构造函数的原型对象构造函数的实例的 proto 属性获取的是当前对象的对象原型

这两者是一个对象，也就是说构造函数的原型对象与此构造函数的实例的对象原型是一个对象

在这里插入图片描述
讯享网

在这里插入图片描述

1.3 constructor构造函数

对象原型（ proto）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性（因为两个其实是一个东西），constructor 我们称为构造函数，因为它指回构造函数本身。

讯享网 function Star(name, gender) { this.name = name this.gender = gender this.sing = function () { console.log('can sing') } } var s1 = new Star('杜甫', '男') // 输出构造函数的原型对象 console.log(Star.prototype) // 输出对象的对象原型 console.log(s1.proto)

在这里插入图片描述

通过上面的代码，我们看到，constructor 属性的值确实是这个对象对应的构造函数

不仅可以通过这个属性，获取原型对象所属的构造函数，constructor属性还可以让原型对象重新指向原来的构造函数

// 为构造方法的原型对象中添加speak 方法 Person.prototype.speak=function(){ 
    console.log('speak') }

一般情况下，对象的方法都在构造函数的原型对象中设置。

如果加入多个方法如下：

讯享网 function Star(name, gender) { 
    this.name = name this.gender = gender } Star.prototype = { 
    function() { 
    console.log('sing'); }, function() { 
    console.log('dance') }, function() { 
    console.log('fly') } } //但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了 //此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。 Star.prototype = { 
    construcotr: Star, function() { 
    console.log('sing'); }, function() { 
    console.log('dance') }, function() { 
    console.log('fly') } }

总结：如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor 指回原来的构造函数

2. 原型链

每一个实例对象又有一个proto属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找就形成了原型链。

其实所有的自定义的或者系统内置的构造函数或者类的最顶级的对象原型都是 Object

在这里插入图片描述

构造函数的prototype 属性获取的是当前构造函数的原型对象
构造函数的实例的’proto’属性获取的是当前对象的对象原型
这两者是一个对象，也就是说构造函数的原型对象与此构造函数的实例的对象原型是一个对象

结论： Star.prototype===s1.__proto__

js 原型链

js 原型链

1. 构造函数

1.1 构造函数原型对象prototype

1.2 对象原型

1.3 constructor构造函数

2. 原型链

相关推荐