JavaScript基础 - 18 （原型 __proto__、原型链、操作原型）

1、原型 __proto__

        空对象，并不是什么都没，带有一个__proto__的变量

        不同的浏览器，打印的变量名不同：Google  [[Prototype]]、火狐 <prototype>、360 __proto__

        __proto__ 原型中，包含了很多对象应该具有的共同方法

        __proto__：有什么用：

                1、js引擎有个处理方式：如果对象调用一个方法/属性，对象本身没有，就会自动到象.__proto__ 中查找

                2、可以扩展系统的构造函数

2、构造函数的原型

        对象是构造函数制造的：构造函数在制造对象的时候，默认会把一个原型注入到对象中

        构造函数 自带原型对象，默认是Object

        为了区分原型所在位置：构造函数中叫prototype，对象中叫__proto__

3、操作原型

        构造函数会隐式声明一个__proto__变量，是对象类型 { }

        其中会存放当前的构造函数本身  constructor 构造

        通常在构造函数的外部操纵原型

 function Teacher(name, age) {
      this.name = name;
      this.age = age;
      //构造函数会隐式声明一个__proto__变量，是对象类型{}
      //其中会存放当前的构造函数本身  constructor 构造
      // this.__proto__.phone="10086";
    }

    //通常在构造函数的外部操纵原型
    Teacher.prototype.phone = "100214";
    var t1 = new Teacher("xx老师", 23);
    console.log(t1);

4、操作原型的用途

        操作原型的作用：构造函数中不变化的内容（函数基本不变），推荐放在原型中存储，每次new的时候，就不会创建新的函数，节省内 存空间

    //每次构造对象，都需要创建新的函数：面积 周长，浪费空间
    // 解决办法：放在原型中即可
    Juxing.prototype.mianji = function () {
      return this.width * this.height;
    }
    Juxing.prototype.zhouchang = function () {
      return (this.width + this.height) * 2;
    }

5、原型链prototype chain

        对象在使用一个属性时，会依次查找所有的__proto__，直到找到为止

        与作用域链是同样的道理，都是就近原则

        每个自定义的对象类型，都会自带一个__proto__；其中包含了默认的一些方法，如果对对象类型调用属性/方法，找不到，就会到__proto__中查找

    function Demo(name){
      this.name=name;
    }
    Demo.prototype.toString = function(){
      return this.name;
    }
    var d = new Demo("名字");
    console.log(d);
    console.log(d.toString());

6、原型的用途

        可以扩展系统的构造函数

        封装框架：js文件中封装好，在需要的文件中引入就可以调用

   //原型的用途：可以扩展系统的构造函数
    var nums = [123, 21, 2, 55, 333, 112];
    Array.prototype.intro = function () {
      console.log("我是打入array内部的小奸细：小黑");
      console.log("this:", this);
    };
    //扩展一个方法：计算数组中元素的总和
    //this代表当前对象，即数组nums
    Array.prototype.sum=function(){
      var sum = 0;
      for(var i=0;i<this.length;i++){
        sum+=this[i];
      }
      return sum;
    }
    nums.intro();
    console.log(nums.sum());