一、原型prototype

  • 原型prototype它是function对象上的的一个属性
  • 把它打印出来会发现它是一个对象

  • 每一个函数都有prototype，在prototype上有一个constructor属性，存储的是当前构造函数本身

    1.       // 原型：prototype是function对象的一个属性
    2.       // 将其打印出来的时候我们会发现它是一个对象
    3.       // 每一个函数都有prototype，在prototype上有一个constructor属性，存储的是当前构造函数本身
    4.       function Handelphone(){}
    5.       console.log(Handelphone.prototype);

  • 原型prototype是定义构造函数构造出的实例对象的公共祖先

  • 所有被该构造函数构造出的实例对象都会继承原型上的属性和方法

  • 实例化的对象在寻找属性或者方法的时候，首先看自己的构造函数上有没有，有的话，就优先使用自己的，没有会基于proto向原型上查找

    1.       // 原型prototype是定义构造函数构造出的实例对象的公共祖先
    2.       // 所有被该构造函数构造出的实例对象都会继承原型上的属性和方法
    3.       // 实例化的对象在寻找属性或者方法的时候，首先看自己的构造函数上有没有，有的话，就优先使用自己的，没有会基于__proto__向原型上查找
    4.       function Handelphone(color, brand){
    5.           this.color = color;
    6.           this.brand = brand;
    7.           this.screen = '18:9';
    8.           this.system = 'Android';
    9.       }
    11.       Handelphone.prototype.rom = '64G';
    12.       Handelphone.prototype.ram = '6G';
    13.       Handelphone.prototype.screen = '16:9';
    15.       var hp1 = new Handelphone('red', '小米');
    16.       var hp2 = new Handelphone('black', '华为');
    18.       console.log(hp1.ram);
    19.       console.log(hp2.rom);
    20.       console.log(hp1.screen);
    21.       console.log(hp2.screen);

  • 上面的代码优化

  • 在封装插件化的时候，一般都是将方法写在原型上，有固定值的属性也要写在原型上；只有需要传递参数的配置项才写在构造函数上

    1.       // 代码优化一
    2.       // 在封装插件化的时候，一般都是将方法写在原型上，有固定值的属性也要写在原型上；只有需要传递参数的配置项才写在构造函数上
    3.       function Handelphone(color, brand, system){
    4.           this.color = color;
    5.           this.brand = brand;
    6.           this.system = system;
    7.       }
    9.       Handelphone.prototype.screen = '18:9';
    10.       Handelphone.prototype.rom = '64G';
    11.       Handelphone.prototype.ram = '6G';
    12.       Handelphone.prototype.call = function(){
    13.           console.log('I am calling somebody');
    14.       }
    16.       var hp1 = new Handelphone('red', '小米', 'Android');
    17.       var hp2 = new Handelphone('black', 'iPone', 'IOS');
    19.       console.log(hp1.ram);
    20.       console.log(hp2.rom);
    21.       console.log(hp1.screen);
    22.       console.log(hp2.screen);
    24.       // 代码继续优化
    25.       function Handelphone(color, brand, system){
    26.           this.color = color;
    27.           this.brand = brand;
    28.           this.system = system;
    29.       }
    31.       Handelphone.prototype = {
    32.           ram: '6G',
    33.           rom: '64G',
    34.           screen: '18:9',
    35.           call: function(){
    36.               console.log('I am calling somebody');
    37.           }
    38.       }
    40.       var hp1 = new Handelphone('red', '小米', 'Android');
    41.       var hp2 = new Handelphone('black', 'iPone', 'IOS');
    43.       console.log(hp1.ram);
    44.       console.log(hp2.rom);
    45.       console.log(hp1.screen);
    46.       console.log(hp2.screen);

    二、实例化对象无法增删改原型上的属性和方法

  • 实例化的对象是无法增删改原型上的方法，但是可以查询到原型上的方法

    1.       // 实例化的对象是无法增删改原型上的方法，但是可以查询到原型上的方法
    2.       function Test(){}
    3.       Test.prototype.name = '我是prototype上的属性';
    5.       var test = new Test();
    7.       // 实例化对象可以访问原型上的属性或者是方法
    8.       console.log(Test.prototype);
    9.       console.log(test.name);
    11.       // 实例化对象无法向原型上增加属性或者是方法
    12.       test.num = 1;
    13.       console.log(Test.prototype, test);
    15.       // 实例化对象本身无法删除原型上的方法
    16.       delete test.name;
    17.       console.log(Test.prototype, test);
    19.       // 实例化对象本身无法修改原型上的属性或者是方法
    20.       test.name = 'proto';
    21.       console.log(Test.prototype, test);

    三、函数原型上的constructor属性

  • 每一个函数都有一个prototype属性，在prototype上有一个constructor属性，它指向构造器，也就是构造函数本身

  • 构造函数原型上的constructor属性的指向是可以更改的

    1.       // 每一个函数都有一个原型属性「prototype」
    2.       // 函数的原型上「prototype」有一个constructor属性，它指向的是构造器，也就是构造函数本身
    3.       // 函数原型上的constructor属性的指向是可以更改的
    4.       function Telephone(){}
    6.       function Handphone(color, brand, system){
    7.           this.color = color;
    8.           this.brand = brand;
    9.           this.system = system;
    10.       }
    12.       Handphone.prototype = {
    13.           constructor: Telephone,
    14.           screen: '5.7'
    15.       }
    17.       console.log(Handphone.prototype);
    18.       console.log(Handphone.prototype.constructor);

    四、实例化对象上的proto属性

  • 只有实例化的对象才会有proto属性，不实例化的对象是没有该属性的

  • proto属于每一个实例化对象，而不属于构造函数本身

  • proto其实就是每个实例化对象存储原型prototype的容器而已

    1.       // 只有实例化的对象才有__proto__属性，没有实例化的对象是没有该属性的
    2.       // __proto__属于的是每一个实例化对象本身，而不属于构造函数本身
    3.       // __proto__属性其实就是每一个实例化对象用来存储原型prototype属性的一个容器
    4.       function Car(){
    5.           // 隐式
    6.           var this = {
    7.               __proto__: Car.prototype;
    8.           }
    9.           // this.name = 'Mazda'
    10.       }
    12.       Car.prototype.name = 'Benz';
    13.       var car = new Car();
    14.       console.log(car.name);

    五、原型上的proto属性的指向可以更改

  • 原型prototype上的proto属性也是可以更改其指向的

    1.       // 原型上的__proto__属性也是可以更改其指向的
    2.       function Person(){}
    4.       Person.prototype.name = '张三';
    6.       var p1 = {
    7.           name: '李四'
    8.       }
    10.       console.log(Person.prototype.constructor);
    11.       Person.prototype.constructor = p1;
    13.       console.log(Person.prototype.constructor);

    六、实例化之前和之后

    ```javascript

    1.   function Car(){}
    3.   Car.prototype.name = 'Mazda';
    5.   var car = new Car();
    6.   Car.prototype.name = 'Benz';
    7.   console.log(car.name);
  1.     function Car(){}
  3.     Car.prototype.name = 'Mazda';
  5.     var car = new Car();
  6.     console.log(car.name);
  7.     Car.prototype.name = 'Benz';
  2. - 每一个函数都有一个原型prototype属性，原型上有一个constructor属性，它指向的是构造器，也就是当前这个构造函数本身
  3. - 在实例化对象之后再去更改原型上的属性和方法，并不会对实例化之前的对象产生影响
  4. ```javascript
  5.         Car.prototype.name = 'Benz';
  6.         function Car(){}
  8.         var car = new Car();
  10.         // 在实例化对象之后再去更改原型上的属性和方法，并不会对实例化之前的对象产生影响
  11.         Car.prototype = {
  12.             name: 'Mazda'
  13.         }
  15.         console.log(car.name);

七、window和return的问题

  1.         function func(){
  2.             window.b = 10;
  3.         }
  5.         func();
  6.         console.log(b);
  9.         // window和return的问题
  10.         function test(){
  11.             var a = 1;
  12.             function add1(){
  13.                 a++;
  14.                 console.log(a);
  15.             }
  16.             return add1;
  17.         }
  19.         var add = test();
  20.         add();
  21.         add();
  22.         add();
  25.         // 通过window的方式来实现上面的test函数
  26.         function compute(){
  27.             var a = 1;
  28.             function add(){
  29.                 a++;
  30.                 console.log(a);
  31.             }
  32.             window.add = add;
  33.         }
  35.         compute();
  36.         add();
  37.         add();
  38.         add();
  41.         // 通过自执行函数的方式来实现compute函数
  42.         var add = (function(){
  43.             var a = 1;
  44.             function add(){
  45.                 a++;
  46.                 console.log(a);
  47.             }
  48.             return add;
  49.         })();
  51.         add();
  52.         add();
  53.         add();
  56.         ;(function(){
  57.             var a = 1;
  58.             function add(){
  59.                 a++;
  60.                 console.log(a);
  61.             }
  62.             window.add = add;
  63.         })()
  65.         add();
  66.         add();
  67.         add();

八、插件化

  • 用自执行函数来写插件，是为了防止全局变量污染
  • 里面写构造函数是为了方便构造出新的实例化对象

  • 最后用window.xxx是为了将该构造函数抛到全局去，方便使用

    1.       // 插件化
    2.       // 用自执行函数是为了防止全局变量污染
    3.       // 用构造函数是为了方便构造实例化对象
    4.       ;(function(){
    5.           function Test(){
    7.           }
    9.           Test.prototype = {
    11.           }
    13.           window.Test = Test;
    14.       })()
    16.       var test = new Test();

    九、作业

  • 写一个插件，调用该方法即可实现加减乘除

    1.       // 作业
    2.       // 写一个插件，调用该方法即可实现加减乘除
    3.       ;(function(){
    4.           var Compute = function(opt){
    5.               this.x = opt.firstNum;
    6.               this.y = opt.secondNum;
    7.           }
    9.           Compute.prototype = {
    10.               add: function(){
    11.                   return this.x + this.y;
    12.               },
    13.               minus: function(){
    14.                   return this.x - this.y;
    15.               },
    16.               mul: function(){
    17.                   return this.x * this.y;
    18.               },
    19.               div: function(){
    20.                   return this.x / this.y;
    21.               }
    22.           }
    24.           window.Compute = Compute;
    25.       })();
    27.       var compute = new Compute({
    28.           firstNum: 8,
    29.           secondNum: 2
    30.       });
    32.       console.log(compute.add());
    33.       console.log(compute.minus());
    34.       console.log(compute.mul());
    35.       console.log(compute.div());
    1.       // 写一个插件，调用该方法即可实现加减乘除
    2.       ;(function(){
    3.           var compute = function(){};
    5.           function Compute(){}
    7.           Compute.prototype = {
    8.               add: function(a, b){
    9.                   return a + b;
    10.               },
    11.               minus: function(a, b){
    12.                   return a - b;
    13.               },
    14.               mul: function(a, b){
    15.                   return a * b;
    16.               },
    17.               div: function(a, b){
    18.                   return a / b;
    19.               }
    20.           }
    22.           window.Compute = Compute;
    23.       })();
    25.       var compute = new Compute();
    27.       console.log(compute.add(10, 5));
    28.       console.log(compute.minus(10, 5));
    29.       console.log(compute.mul(10, 5));
    30.       console.log(compute.div(10, 5));