前端 JS面向对象 原型 prototype

目录

一、问题引出

二、prototype原型对象

三、小结

四、constructor

五、__proto__对象原型

六、原型链

---

一、问题引出

由于JS的构造函数存在内存浪费问题：

    function Star(name,age){this.name=namethis.age=agethis.sing=function () {console.log("唱歌！")}}let star01=new Star("Jack",18)let star02=new Star("Mark",20)console.log(star01.sing==star02.sing)

打印：不同实例对象的动态方法是不同的，会开出新的内存区域用于存储相同的方法。

对此问题，提出了原型处理方法。

二、prototype原型对象

我们可以将不变的方法直接定义在prototype属性中，以减少内存开销。

对上面的问题代码进行优化：

    function Star(name,age){this.name=namethis.age=age}Star.prototype.sing=function (){console.log("唱歌！")}let star01=new Star("Jack",18)let star02=new Star("Mark",20)console.log(star01.sing==star02.sing)

打印：可以看到两个实例对象的该方法是同一个，证明都使用了同一个原型里的方法，没有新开内存拷贝。

三、小结

1、公共属性写到构造函数里；

2、公共函数写到prototype原型对象里；

3、构造函数里的this就是指向实例化的对象；

4、原型对象里的this还是指向实例化的对象。

四、constructor

prototype里的属性constructor属性就是帮原型确定它的构造函数是谁，如，构造函数Star的prototype里的constructor属性就是指向Star构造函数的。

作用：指向原型对象的构造函数。

    function Star(){}console.log(Star.prototype)Star.prototype={sing:function (){console.log("唱歌")},dance:function (){console.log("跳舞")}}console.log(Star.prototype)

打印：没构造前，有constructor属性，构造后没有了

可以看到，上面这种写法直接给prototype赋值了新值，没有了constructor对象标识，正确写法应该是：

    function Star() {}console.log(Star.prototype)Star.prototype = {//重新指回这个原型的构造函数 Starconstructor: Star,sing: function () {console.log("唱歌")},dance: function () {console.log("跳舞")}}console.log(Star.prototype)

打印：

五、__proto__对象原型

每个实例化的对象都有一个__proto__，而这个__proto__就是指向构造函数的prototype对象的。这样一来，每个实例化对象都可以访问prototype里的数据了。

1、这是一个只读属性；

2、

    function Star() {}const star01=new Star()console.log(star01.__proto__ === Star.prototype)

打印：这里可以看到__proto__指向的是构造函数的原型对象

此外，__proto__实例化对象的原型中也有constructor，并且是指向prototype原型对象中的constructor的。

六、原型链

只要是对象就是__proto__，prototype对象中也有__proto__属性，我们按照prototype的__proto__可以一级一级的指向，到最顶层Object.prototype.__proto__指向为null。

使用场景：比如某个对象需要调用一个方法，而这个方法在当前对象里没有，就会向上一级查找是否有该方法，若仍然没有再往上寻找prototype里是否有该方法，依次类推，直至到顶层prototype里查找，指向为null时结束查找。

可以通过instanceof来判断对象是否在一个原型链上。