保安日记：JavaScript学习第十六篇之Javascrip 面向对象--原型

原型对象

给对象加方法，可以理解为css中的class–给元素加样式

Array.prototype.sum = function () {
// 可以给系统的类添加原型方法
}

通常都是用构造函数加属性，用原型加方法

<script>
    //----构造函数
      function CreatePerson(name, qq) {  
        this.name = name;
        this.qq = qq;
      }
	//----原型
      CreatePerson.prototype.showName = function () {
        alert("我的名字是：" + this.name);
      };
      CreatePerson.prototype.showQQ = function () {
        alert("我的QQ是：" + this.qq);
      };

      var obj1 = new CreatePerson("张三", "12345678");
      var obj2 = new CreatePerson("张四", "87654131");
      obj1.showName();
      obj1.showQQ();
    </script>

对象原型 __proto

对象都会有一个属性_proto_原型 指向构造函数的prototype原型对象

• __proto__对象原型和原型对象prototype是等价的

• __proto__对象原型的意义就在于为对象的查找机制提供一个方向，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

      function CreatePerson(name, qq) {
        this.name = name;
          this.qq = qq;
        }
        CreatePerson.prototype = {
          // 多个方法可以以对象的形式储存，但是必须让这个属性只指向原来的构造函数，不然就被赋值了
          constructor: CreatePerson,
          showName: function () {
            alert("我的名字是：" + this.name);
          },
          showQQ: function () {
            alert("我的QQ是：" + this.qq);
          },
        };
  
        var obj1 = new CreatePerson("张三", "12345678");
        console.log(CreatePerson.prototype);
        console.log(obj1.__proto__);
       	    console.log(CreatePerson.prototype.constructor);
        console.log(obj1.__proto__.constructor);

构造函数、实例、原型对象三者关系

原型链

原型对象中this指向问题

function Star(name, qq) {
        this.name = name;
        this.qq = qq;
      }
      
      var that;
      Star.prototype.sing = function () {
        alert("i can sing");
        that = this;
      };

      var ldh = new Star("刘德华", 18);
      ldh.sing();
      console.log(that == ldh);
1.在构造函数中，this指向的是实例对象 ldh
2.原型对象函数里面的this 指向的是实例对象 ldh

扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法

注意： 数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {xxxx},只能是 Array.prototype.xxx = function(){} 的方式

继承call() 方法

1.call() 可以调用函数

2.call()可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象

<script>
      function fn(x, y) {
        console.log("hello,world");
        console.log(this);  //----{name: "andy"}
        console.log(x + y);
      }
      var o = {
        name: "andy",
      };
      fn.call(o, 1, 2); //---- 3
    </script>

3.借用构造函数继承父类型属性、方法

    <script>
      // 借用父构造函数继承属性;
      //1.父构造函数
      function Father(x, y) {
        this.x = x;
        this.y = y;
      }
      Father.prototype.money = function () {
        console.log(10000);
      };
      //2.子构造函数
      function Son(x, y) {
        Father.call(this, x, y);
      }
      Son.prototype = new Father(); //通过father创造的实例对象，让son原型对象等于实例对象，来获取father原型对象里的方法（实例对象通过__proto__方法获取father原型对象里的方法）
      //利用对象的形式修改了原型对象，需要用constructor 指回原来的构造函数
      Son.prototype.constructor = Son;
      var son = new Son("mike", 18);
      console.log(son); //----Son {x: "mike", y: 18}
    </script>