js 之 原型 (prototype、constructor、__proto__、继承、原型链)

原型

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

2、js规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以也称为原型对象。

3、这个对象可以挂载函数，对象实例化不会多次创建原型上的函数，节约内存。

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

5、构造函数和原型对象中的 this 都指向 实例化的对象。

  //公共的属性写在构造函数里面
        function Star(uname, age) { //函数名首字母大写
            this.uname = uname
            this.age = age
        }
        console.log(Star.prototype) //返回一个对象 称为原型对象

        //公共的方法写到 原型对象身上
        Star.prototype.sing = function () {
            console.log('唱歌')
        }
       
         //实例对象
        const lxx = new Star('林某某', 23)
        const linsir = new Star('林总', 30)
        console.log(lxx.sing === linsir.sing) // true 说明两函数一样，共享

实例：给数组扩展求最大值方法和求和方法

1、定义一个方法，任何一个数组实例对象都可以使用

 2、自定义的方法写到 数组.prototype 身上

 const arr = [1, 2, 3]
        Array.prototype.max = function () {
            //展开运算符
            return Math.max(...this)
            //原型函数里面的 this 指向 实例对象 arr
        }
        console.log(arr.max())  // 3
        console.log([3, 4, 9].max()) // 9

 Array.prototype.sum = function(){
        // reduce()方法  回调函数, 起始值
       return this.reduce((prev,item)=> prev + item , 0)  
       }
      console.log([1,2,3].sum()) // 6
      console.log([11,21,31].sum())  // 63

 

constructor （构造器/函数）

每个原型对象里面都有个 constructor 属性 （constructor 构造函数）

作用：该属性指向该原型对象的构造函数

  function Star() {}
        console.log(Star.prototype.constructor === Star)  // true

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值。但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象  constructor 就不再指向当前构造函数了，此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

function Star() { }
        Star.prototype = {
            sing: function () {
                console.log('唱歌')
            },
            dance: function () {
                console.log('跳舞')
            }
        }
        console.log(Star.prototype.constructor)  // 指向 object

 function Star2() { }
        Star2.prototype = {
            //手动利用 constructor 指向 Star2 构造函数
            constructor: Star2,
            sing: function () {
                console.log('唱歌')
            },
            dance: function () {
                console.log('跳舞')
            }
        }
        console.log(Star2.prototype.constructor)  // 指向 Star2

 

对象原型 （只读，不能赋值）

 对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。

 注意：

__proto__ 是JS非标准属性

[[prototype]] 和 __proto__ 意义相同

用来表示当前实例对象指向哪个原型对象 prototype

__proto__ 对象原型里面也有一个 constructor 属性，指向创建该实例对象的构造函数

function Star() { }
        const lxx = new Star()
        //对象原型 __proto__ 指向 该构造函数的原型对象
        console.log(lxx.__proto__ === Star.prototype)   //true

 

关系图： 

 

 

原型继承 

 继承是面对对象编程的另一个特征，进一步提升代码封装的程度，JS中大多是借助原型对象实现继承的特征。

  const Person = {
            eyes: 2,
            head: 1
        }
        function Woman() {

        }
        //通过原型来继承 Person
        Woman.prototype = Person
        //指回原来的构造函数
        Woman.prototype.constructor = Woman
        const red = new Woman()
        console.log(red)
        console.log(Woman.prototype)

 注意：以下代码中，男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都受影响。

 

解决方案： （构造函数）

 

原型链 

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

只要是对象就有 __proto__

只要是原型对象就有 constructor

原型链的查找规则：

1、当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性

 2、如果没有就查找它的原型（__proto__ 指向的prototype 原型对象）

3、如果还没有就查找原型对象的原型（Object 的原型对象）

4、以此类推，一直找到Object 为止（null）

5、__proto__ 对象原型的意义在于为对象成员查找机制提供一个方向，或者说一条路线

6、可使用 instanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

 function Person() {

        }
        const lxx = new Person()
        console.log(lxx instanceof Person) //true
        console.log(lxx instanceof Object) //true
        console.log(lxx instanceof Array)  //false
        console.log(Array instanceof Object)  //true 万物皆对象