ECMA基础(三)

原型

原型是什么？

prototype

原型prototye是function对象的一个属性，但打印结果也是对象。

  1. function Handphone() {}
  2. console.log(Handphone.prototype); //{constructor: ƒ}
  1. function Handphone(color, brand) {
  2.   this.color = color;
  3.   this.brand = brand;
  4.   this.screen = '18:9';
  5.   this.system = 'Android';
  6. }
  8. var hp1 = new Handphone('red', 'xiaomi');
  9. var hp2 = new Handphone('black', 'huawei')
  10. console.log(hp1); //Handphone {color: "red", brand: "xiaomi", screen: "18:9", system: "Android"}
  11. console.log(hp2); //Handphone {color: "black", brand: "huawei", screen: "18:9", system: "Android"}

既然原型prototye是function对象的一个属性，尝试下

  1. function Handphone(color, brand) {
  2.   this.color = color;
  3.   this.brand = brand;
  4.   this.screen = '18:9';
  5.   this.system = 'Android';
  6. }
  8. Handphone.prototype.rom = '64G';
  9. Handphone.prototype.ram = '6G';
  11. var hp1 = new Handphone('red', 'xiaomi');
  12. var hp2 = new Handphone('black', 'huawei')
  13. console.log(hp1.rom); //64G
  14. console.log(hp2.ram); //6G

说明

  • 原型prototype是定义构造函数构造出每个对象的公共祖先
  • 所有被该构造函数构造出的对象都可以继承原型上的属性和方法
  1. function Handphone(color, brand) {
  2.   this.color = color;
  3.   this.brand = brand;
  4.   this.screen = '18:9';
  5.   this.system = 'Android';
  6. }
  8. Handphone.prototype.rom = '64G';
  9. Handphone.prototype.ram = '6G';
  10. Handphone.prototype.screen = '16:9';
  12. var hp1 = new Handphone('red', 'xiaomi');
  13. var hp2 = new Handphone('black', 'huawei')
  14. console.log(hp1.screen); //18:9
  15. console.log(hp2.screen); //18:9

说明构造函数自身有的属性不会往祖先身上找

作用：

  • 减少代码冗余(每次实例化会重复)
  1. function Handphone(color, brand) {
  2.   //配置项，需要传参取配置的
  3.   this.color = color;
  4.   this.brand = brand;
  5. }
  7. //公共方法
  8. Handphone.prototype.rom = '64G';
  9. Handphone.prototype.ram = '6G';
  10. Handphone.prototype.screen = '16:9';
  11. Handphone.prototype.system = 'Android';
  12. Handphone.prototype.call = function () {
  13.   console.log('I am calling somebody');
  14. };
  16. var hp1 = new Handphone('red', 'xiaomi');
  17. var hp2 = new Handphone('black', 'huawei')
  18. hp2.call(); //I am calling somebody

实例化出来的对象 对原型prototype的增删改查

查

  1. function Test() {}
  2. Test.prototype.name = 'prototype';
  3. var test = new Test();
  5. console.log(test.name); //prototype

增(不能修改原型属性，可修改实例对象属性)

  1. function Test() {}
  2. Test.prototype.name = 'prototype';
  4. var test = new Test();
  5. test.num = 1;
  6. console.log(Test.prototype); //{name: "prototype", constructor: ƒ}
  7. console.log(test); //Test {num: 1}
  9. /**
  10.  * 说明test.num = 1; 写在 
  11.  * function Test() {
  12.  *   this.num = 1;
  13.  * }
  14.  */

删(不能删除原型属性，可删除实例对象属性)

  1. function Test() {
  2.   this.name = 'proto';
  3. }
  4. Test.prototype.name = 'prototype';
  6. var test = new Test();
  8. console.log(test); //Test {name: "proto"}
  9. delete test.name;
  10. console.log(Test.prototype); //{name: "prototype", constructor: ƒ}
  11. console.log(test); //Test {}

改(不能更改原型属性，可更改实例对象属性)

  1. function Test() {}
  2. Test.prototype.name = 'prototype';
  4. var test = new Test();
  6. test.name = 'proto';
  7. console.log(Test.prototype); //{name: "prototype", constructor: ƒ}
  8. console.log(test); //Test {name: "proto"}

实际开发写法：

  1. //公共方法
  2. Handphone.prototype = {
  3.   rom: '64G',
  4.   ram: '6G',
  5.   screen: '18:9',
  6.   system: 'Andriod',
  7.   call: function () {
  8.     console.log('I am calling somebody');
  9.   }
  10. }

constructor

  • 在prototype里面
  • 指向构造函数本身
  1. function Handphone(color, brand, system) {
  2.   this.color = color;
  3.   this.brand = brand;
  4.   this.system = system;
  5. }
  7. console.log(Handphone.prototype);
  9. /**
  10.  * 打印：
  11.  * {constructor: ƒ}
  12.      constructor: ƒ Handphone(color, brand, system)
  13.      __proto__: Object
  14. */

说明constructor对应的是构造函数

  1. function Handphone(color, brand, system) {
  2.   this.color = color;
  3.   this.brand = brand;
  4.   this.system = system;
  5. }
  7. function Telephone() {}
  9. Handphone.prototype = {
  10.   //将constructor指向Telephone
  11.   constructor: Telephone
  12. }
  14. console.log(Handphone.prototype);
  16. /**
  17.  * 打印：
  18.  * {constructor: ƒ}
  19.      constructor: ƒ Telephone()
  20.      __proto__: Object
  21. */

说明可以通过构造函数本身prototype更改contructor的指向另外的构造函数

__proto__

是实例化以后的结果，是每个实例化对象的原型prototype的容器

  1. function Car() {}
  3. Car.prototype.name = 'Benz';
  5. var car = new Car();
  6. console.log(car); //Car {}
  8. /**
  9.  * 点开打印结果
  10.  * Car {}
  11.  *   __proto__: Object
  12.  */

相当于实例化以后实例对象里面的其中一个属性

  1. function Car() {
  2.   var this = {
  3.     __proto__: ?
  4.   }
  5. }

__proto__里面存放一个对象包含构造函数原型上的属性

  1. /**
  2.  * 点开打印结果
  3.  * Car {}
  4.      __proto__:
  5.        name: "Benz"
  6.        constructor: ƒ Car()
  7.        __proto__: Object
  8.  */
  1. function Car() {
  2.   var this = {
  3.     __proto__: Car.prototype
  4.   }
  5.   this.color = ‘red';
  6. }

说明原型prototype是属于实例化对象而不属于构造函数

属性访问顺序

  1. function Car() {
  2.   /**
  3.    *  var this = {
  4.         __proto__: Car.prototype
  5.       }
  6.    */
  7.   this.name = 'mazda';
  8. }
  10. Car.prototype.name = 'Benz';
  12. var car = new Car();
  13. console.log(car); //Car {name: "mazda"}

找到自身有的属性而不是找原型上的属性

尝试强行修改实例对象的__proto__的值

  1. function Person() {}
  2. Person.prototype.name = '张三';
  3. var p1 = {
  4.   name: 'lisi'
  5. }
  7. var person = new Person();
  8. console.log(person.__proto__); //{name: "张三", constructor: ƒ}
  10. person.__proto__ = p1;
  11. console.log(person.__proto__); //{name: "lisi"}

说明__proto__属性可以更改

对属性的重写

  1. function Car() {}
  2. Car.prototype.name = 'Mazda';
  3. var car = new Car();
  4. Car.prototype.name = 'Benz';
  5. console.log(car.name); //Benz
  1. Car.prototype.name = 'Mazda';
  2. function Car() {}
  3. var car = new Car();
  4. Car.prototype.name = 'Benz';
  5. console.log(car.name); //Benz
  1. Car.prototype.name = 'Mazda';
  2. function Car() {}
  3. Car.prototype.name = 'Benz';
  4. var car = new Car();
  5. console.log(car.name); //Benz

注意：实例化之前的prototype和实例化的prototype是有区别的

  1. Car.prototype.name = 'Benz';
  2. function Car() {}
  4. var car = new Car();
  6. //还没实例化
  7. Car.prototype = {
  8.   name: 'Mazda'
  9. }
  10. console.log(car.name); //Benz
  12. //实例化以后
  13. function Car() {
  14.   var this = {
  15.     __proto__: Car.prototype = {
  16.       name: 'Benz'
  17.     }
  18.   }
  19. }
  1. Car.prototype.name = 'Benz';
  2. function Car() {}
  4. Car.prototype = {
  5.   name: 'Mazda'
  6. }
  7. var car = new Car();
  8. console.log(car.name); //Mazda
  1. Car.prototype.name = 'Benz';
  2. function Car() {}
  3. var car = new Car();
  4. Car.prototype = {
  5.   name: 'Mazda'
  6. }
  7. var car2 = new Car();
  9. console.log(car.name); //Benz
  10. console.log(car2.name); //Mazda

时间线

  1. Car.prototype.name = 'Benz';
  2. function Car() {};
  4. console.log(Car.prototype);
  5. var car = new Car();
  6. console.log(car);
  8. /**
  9.  * 没实例化：
  10.  * 打印Car.prototype结果：
  11.  * {name: "Benz", constructor: ƒ}
  12.      name: "Benz"
  13.      constructor: ƒ Car()
  14.        name: "Car"
  15.        prototype: {name: "Benz", constructor: ƒ}
  16.        __proto__: ƒ ()
  17.       __proto__: Object
  18.  */
  20. /**
  21.  * 实例化后：
  22.  * 打印car结果：
  23.  * Car {}
  24.      __proto__:
  25.        name: "Benz"
  26.        constructor: ƒ Car()
  27.          name: "Car"
  28.          prototype: {name: "Benz", constructor: ƒ}
  29.          __proto__: ƒ ()
  30.        __proto__: Object
  31.  */

原型链

实例对象的__proto__指向构造函数的原型，所有的对象都有自己的原型(包括原型本身)

  1. function Car() {}
  2. var car = new Car();
  3. console.log(Car.prototype);
  4. console.log(car);
  6. /**
  7.  * 打印Car.prototype：
  8.  * {constructor: ƒ}
  9.      constructor: ƒ Car()
  10.      __proto__: Object
  11.  */
  13. /**
  14.  * 打印car：
  15.  * Car {}
  16.      __proto__: Object => 指向Car.prototype
  17.  */

概念

沿着__proto__去找原型里的属性一层一层的继承原型的属性的这条链

  1. Professor.prototype.tSkill = 'JAVA';
  3. function Professor() {}
  5. var professor = new Professor();
  7. Teacher.prototype = professor;
  9. function Teacher() {
  10.   this.mSkill = 'JS/JQ';
  11. }
  12. var teacher = new Teacher();
  13. Student.prototype = teacher;
  15. function Student() {
  16.   this.pSkill = 'HTML/CSS'
  17. }
  18. var student = new Student();
  19. console.log(student);
  21. /**
  22.  * 打印student
  23.  * Student {pSkill: "HTML/CSS"}
  24.      pSkill: "HTML/CSS"
  25.      __proto__: Professor
  26.        mSkill: "JS/JQ"
  27.        __proto__: Professor
  28.          __proto__:
  29.            tSkill: "JAVA"
  30.            constructor: ƒ Professor()
  31.            __proto__: Object
  32.  */

原型的顶端是Object.prototype(面试问题)

  1. console.log(Professor.prototype);
  3. /**
  4.  * 打印Professor.prototype：
  5.  * {tSkill: "JAVA", constructor: ƒ}
  6.      tSkill: "JAVA"
  7.      constructor: ƒ Professor()
  8.      __proto__:
  9.        constructor: ƒ Object()
  10.        toString: ƒ toString()
  11.  */

注：Object.prototype.toString()

原型链上的增删改只能是它自己本身增删改(后代不能)

引用值思考：子代赋值是否影响被继承的原型？子代赋值还是父代被赋值？

  1. function Teacher() {
  2.   this.mSkill = 'JS/JQ';
  3.   //引用值
  4.   this.success = {
  5.     alibaba: '28',
  6.     tencent: '30'
  7.   }
  8. }
  9. var teacher = new Teacher();
  10. Student.prototype = teacher;
  12. function Student() {
  13.   this.pSkill = 'HTML/CSS'
  14. }
  15. var student = new Student();
  16. student.success.baidu = '100';
  18. console.log(teacher);
  19. //Professor {mSkill: "JS/JQ", success: {alibaba: "28", tencent: "30", baidu: "100"}}
  21. console.log(student); 
  22. //Student {pSkill: "HTML/CSS"}

结果看出没有赋值到实例对象里而是赋值到实例对象的原型上

分析：子代实例对象不存在success属性，所以向上找success属性并修改值

引用值思考：

  1. function Teacher() {
  2.   this.mSkill = 'JS/JQ';
  3.   this.success = {
  4.     tencent: '26'
  5.   }
  6. }
  7. var teacher = new Teacher();
  8. Student.prototype = teacher;
  10. function Student() {
  11.   this.pSkill = 'HTML/CSS'
  12.   this.success = {
  13.     alibaba: '26'
  14.   }
  15. }
  16. var student = new Student();
  17. student.success.baidu = '100';
  19. console.log(teacher);
  20. //Professor {mSkill: "JS/JQ", success: {tencent: "26"}}
  22. console.log(student);
  23. //Student {pSkill: "HTML/CSS", uccess: {alibaba: "26", baidu: "100"}}

子代实例对象已经存在success属性只更改自己的属性值

原始值思考：

  1. function Teacher() {
  2.   this.mSkill = 'JS/JQ';
  3.   //原始值
  4.   this.students = 500;
  5. }
  6. var teacher = new Teacher();
  7. Student.prototype = teacher;
  9. function Student() {
  10.   this.pSkill = 'HTML/CSS'
  11. }
  12. var student = new Student();
  13. student.students++;
  15. console.log(teacher);
  16. //Professor {mSkill: "JS/JQ", students: 500}
  18. console.log(student);
  19. //Student {pSkill: "HTML/CSS", students: 501}
  21. //分析
  22. student.students++ => student.students = student.students += 1
  23. 即student原来没有students属性，但是在赋值的时候被增加了students属性

子代实例对象不能修改父代的原始值属性，隐式的为子代实例对象增加原始值属性

原始值思考：

  1. function Teacher() {
  2.   this.mSkill = 'JS/JQ';
  3.   this.students = 500;
  4. }
  5. var teacher = new Teacher();
  6. Student.prototype = teacher;
  8. function Student() {
  9.   this.pSkill = 'HTML/CSS';
  10. }
  11. var student = new Student();
  12. student.students = '800';
  14. console.log(teacher);
  15. //Professor {mSkill: "JS/JQ", students: 500}
  17. console.log(student);
  18. //Student {pSkill: "HTML/CSS", students: "800"}

赋值的情况下会帮student实例对象新增属性students并赋值

  1. function Car() {
  2.   this.brand = 'Benz';
  3. }
  4. Car.prototype = {
  5.   brand: 'Mazda',
  6.   intro: function () {
  7.     console.log('我是' + this.brand + '车');
  8.   }
  9. }
  10. var car = new Car();
  11. car.intro(); //我是Benz车 this => 实例对象
  12. Car.prototype.intro(); //我是Mazda车 this => Car.prototype

实例化对象已经存在brand，改变调用对象可以改变方法的输出

原型的原型Object.prototype

  1. function Obj() {}
  2. var obj = new Obj();
  3. console.log(obj.__proto__.__proto__);

Object.create(对象/null)创建对象用的方法

此方法可以自己定义，可以指定原型

  1. function Obj() {}
  2. Obj.prototype.num = 1;
  3. //两条语句产生的效果是一样的
  4. var obj1 = Object.create(Obj.prototype);
  5. var obj2 = new Obj();
  6. console.log(obj1);
  8. /**
  9.  * 打印obj1 和 打印obj2：
  10.  * Obj {}
  11.      __proto__:
  12.        num: 1
  13.        constructor: ƒ Obj()
  14.        __proto__: Object
  15.  */
  1. var test = {
  2.   num: 2
  3. }
  5. function Obj() {}
  6. Obj.prototype.num = 1;
  8. var obj1 = Object.create(test);
  9. var obj2 = new Obj();
  10. console.log(obj1);
  11. console.log(obj2);
  13. /**
  14.  * 打印obj1
  15.  * {}
  16.      __proto__:
  17.      num: 2
  18.      __proto__: Object
  19.  * 
  20.  * 打印obj2：
  21.  * Obj {}
  22.      __proto__:
  23.        num: 1
  24.        constructor: ƒ Obj()
  25.        __proto__: Object
  26.  */

Object.create()提供了一个自定义原型的功能

通过Object.create(null)创建一个空对象

  1. var obj1 = Object.create(null);
  2. console.log(obj1);
  4. //{}
  5. //  No properties
  1. var obj1 = Object.create(null);
  2. console.log(obj1);
  4. obj1.num = 1;
  5. var obj2 = Object.create(obj1);
  6. console.log(obj2);
  7. console.log(obj2.num); //1
  9. /**
  10.  * 打印obj2：
  11.  * {}
  12.      __proto__:
  13.        num: 1
  14. */

作用：把其他对象作为自己的原型存在

思考：是不是所有的对象都继承Object.prototype?

  1. var obj = Object.create(null);
  2. obj.num = 1;
  3. obj.toString(); //报错，说明没有该方法
  4. console.log(obj); //这个对象并没有原型

说明通过Object.create(null)创建的对象不继承Object.prototype

不是所有的对象都继承于Object.prototype(面试题)

手动添加对象并赋值给Object.create(null)创建的对象

  1. var obj = Object.create(null);
  2. obj.num = 1;
  3. var obj1 = {
  4.   count: 2
  5. }
  6. obj.__proto__ = obj1;
  7. console.log(obj);
  9. console.log(obj.count); //undefined
  11. /**
  12.  * 打印obj：
  13.  * {num: 1, __proto__: {…}}
  14.      num: 1
  15.      __proto__:
  16.        count: 2
  17.        __proto__: Object
  18.  */

发现可以继承Object.prototype，但访问不了变量，说明自己定义的__proto__是不行的，必须是系统内置的才能访问(只能更改不能制造__proto__)

思考：undefined和null能否使用Object.prototype.toString()方法?

  1. console.log(undefined.toString()); //报错 
  2. console.log(null.toString()); //报错

原始值是没有属性的，只有引用值才有

  1. var num = 1;
  2. console.log(num.toString()); //1 字符串
  4. //包装类的过程
  5. //new Number(1) -> toString();
  6. var num2 = new Number(num);
  7. console.log(num2);
  9. /**
  10.  * 打印num2:
  11.  * Number {1}
  12.      __proto__: Number
  13.        constructor: ƒ Number()
  14.        toString: ƒ toString()
  15.  *
  16.  */

undefined和null不能经过包装类，还没有原型

  1. var num = 1;
  2. var obj = {};
  3. var obj2 = Object.create(null);
  4. //document.write() 此处有个隐式转换的操作把要打印的内部转换成string类型
  5. document.write(num); //页面显示 1
  6. document.write(obj); //页面显示 1[object Object]
  7. console.log(Object.prototype.toString(obj)); //[object Object]
  8. //obj2没有原型没法继承Object.prototype，没法转换string类型
  9. // document.write(obj2); //报错 不能转换对象为原始值 所以没法打印

思考：为什么Number()有自己的toString()方法而不是去继承对象原型的toString()方法?

包装类都有自己系统内置的toString()方法

  1. console.log(Object.prototype);
  2. console.log(Number.prototype);
  3. console.log(String.prototype);
  4. console.log(Boolean.prototype);
  5. console.log(Array.prototype);

区别：Object.prototype.toSting()和Number.prototype.toSting()

  1. console.log(Object.prototype.toString.call(1));
  2. //"[object Number]" -> [对象类型的Number构造函数]
  3. console.log(Object.prototype.toString.call('a'));
  4. //"[object String]" -> [对象类型的String构造函数]
  5. console.log(Object.prototype.toString.call(true));
  6. //"[object Boolean]" -> [对象类型的Boolean构造函数]
  7. console.log(Object.prototype.toString.call([1, 2]));
  8. //"[object Array]" -> [对象类型的Array构造函数]
  9. console.log(Object.prototype.toString.call({
  10.   name: 1
  11. }));
  12. // "[object Object]" -> [对象类型的Object构造函数]
  14. //说明两个toString()是不一样的，实现的功能不一样的
  15. console.log(Number.prototype.toString.call(1)); //'1'
  16. console.log(Object.prototype.toString.call(1)); //[object Number]

说明两个toString()是不一样的，实现的功能不一样的，也不是继承Object.prototype, 返回的值也不一样

因为Number.prototype跟Object.prototype的返回值不一样(需求不一样)，所以Number.prototype单独重写了toString()方法

继承

  1. Professor.prototype = {
  2.   name: 'Mr.Zhang',
  3.   tSkill: 'JAVA'
  4. }
  6. function Professor() {}
  7. var professor = new Professor();
  9. Teacher.prototype = professor;
  11. //------------------------------------------
  13. function Teacher() {
  14.   this.name = 'Mr.Wang';
  15.   this.mSkill = 'JS/JQ';
  16. }
  17. var teacher = new Teacher();
  19. //------------------------------------------
  21. Student.prototype = teacher;
  23. function Student() {
  24.   this.name = 'Mr.Li';
  25.   this.pSkill = 'HTML/CSS'
  26. }
  27. var student = new Student();
  28. console.log(student);
  32. /**
  33.  * student:
  34.  * Student {name: "Mr.Li", pSkill: "HTML/CSS"}
  35.      name: "Mr.Li"
  36.      pSkill: "HTML/CSS"
  37.      __proto__:
  38.        mSkill: "JS/JQ"
  39.        name: "Mr.Wang"
  40.        __proto__:
  41.          __proto__:
  42.            name: "Mr.Zhang"
  43.            tSkill: "JAVA"
  44.            __proto__: Object
  45.  */

思考：学生是否需要继承老师和教授身上的所有的属性？

实际上并不需要

call/appl可以实现”继承”(借用属性方法)但是没办法继承原型

  1. function Teacher(name, mSkill) {
  2.   this.name = name;
  3.   this.mSkill = mSkill;
  4. }
  6. function Student(name, mSkill, age, major) {
  7.   Teacher.apply(this, [name, mSkill]);
  8.   this.age = age;
  9.   this.major = major;
  10. }
  12. var student = new Student('Mr.Zhang', 'JS/JQ', 18, 'Computer');
  13. console.log(student);
  15. /**
  16.  * 打印student：
  17.  * Student {name: "Mr.Zhang", mSkill: "JS/JQ", age: 18, major: "Computer"}
  18.      age: 18
  19.      mSkill: "JS/JQ"
  20.      major: "Computer"
  21.      name: "Mr.Zhang"
  22.      __proto__:
  23.        constructor: ƒ Student(name, mSkill, age, major)
  24.        __proto__: Object
  25.  */

继承原型的操作

  1. function Teacher() {
  2.   this.name = 'Mr.Li';
  3.   this.tSkill = 'JAVA';
  4. }
  6. Teacher.prototype = {
  7.   pSkill: 'JS/JQ'
  8. }
  10. var t = new Teacher();
  11. console.log(t);
  13. function Student() {
  14.   this.name = 'Mr.Wang';
  15. }
  17. //继承原型
  18. Student.prototype = Teacher.prototype;
  20. var s = new Student();
  21. console.log(s);
  23. /**
  24.  * 打印teacher：
  25.  * Teacher {name: "Mr.Li", tSkill: "JAVA"}
  26.      name: "Mr.Li"
  27.      tSkill: "JAVA"
  28.      __proto__:
  29.        pSkill: "JS/JQ"
  30.        __proto__: Object
  31.  */
  33. /**
  34.  * 打印student：    
  35.    Student {name: "Mr.Wang"}
  36.      name: "Mr.Wang"
  37.      __proto__:
  38.        pSkill: "JS/JQ"
  39.        __proto__: Object
  40.  */

以上基础存在修改子代原型会影响父代的原型的问题

  1. ...
  2. //继承原型 此时赋值会影响teacher的原型
  3. Student.prototype = Teacher.prototype;
  4. Student.prototype.age = 18;
  5. ...
  7. /**
  8.  * 打印teacher：
  9.  * Teacher {name: "Mr.Li", tSkill: "JAVA"}
  10.      name: "Mr.Li"
  11.      tSkill: "JAVA"
  12.      __proto__:
  13.        age: 18
  14.        pSkill: "JS/JQ"
  15.        __proto__: Object
  16.  */
  18. /**
  19.  * 打印student：    
  20.    Student {name: "Mr.Wang"}
  21.      name: "Mr.Wang"
  22.      __proto__:
  23.      age: 18
  24.      pSkill: "JS/JQ"
  25.      __proto__: Object
  26.  */

圣杯模式

Buffer

思考：如何解决上述问题？

企业级方法

  1. function Teacher() {
  2.   this.name = 'Mr.Li';
  3.   this.tSkill = 'JAVA';
  4. }
  6. Teacher.prototype = {
  7.   pSkill: 'JS/JQ'
  8. }
  10. var t = new Teacher();
  12. function Student() {
  13.   this.name = 'Mr.Wang';
  14. }
  16. //企业级方案 
  17. //中转构造函数--Buffer
  18. function Buffer() {}
  19. Buffer.prototype = Teacher.prototype;
  20. var buffer = new Buffer();
  21. Student.prototype = buffer;
  23. var s = new Student();
  24. console.log(s);
  26. /**
  27.  * 打印s:
  28.  * Student {name: "Mr.Wang"}
  29.      name: "Mr.Wang"
  30.      __proto__:
  31.        __proto__:
  32.          pSkill: "JS/JQ"
  33.          __proto__: Object
  34.  */

完美解决继承和隔离的问题

封装

  2. //继承方 -> Target
  3. //被继承方 -> Origin
  4. function inherit(Target, Origin) {
  5.   function Buffer() {}
  6.   Buffer.prototype = Origin.prototype;
  7.   Target.prototype = new Buffer();
  8.   //还原构造器
  9.   Target.prototype.constructor = Target;
  10.   //设置继承源
  11.   Target.prototype.super_class = Origin;
  12. }
  14. /**
  15.  * 打印s:
  16.  * Student {}
  17.      __proto__: Teacher
  18.        constructor: ƒ Student()
  19.        super_class: ƒ Teacher()
  20.        __proto__: Object
  21.  */

立即执行函数

IIFE-immediately invoked function expression

自动执行，执行完成以后立即销毁

作用：

  • 初始化函数

写法：

  1. ;(function(){})();
  1. ;(function(){}()); //W3C建议

传参：

  1. (function (a, b) {
  2.   var a = 1,
  3.     b = 2;
  4.   console.log(a + b);
  5. })(1, 2);

返回值：

  1. var num = (function (a, b) {
  2.   var a = 1,
  3.     b = 2;
  4.   return a + b;
  5. })(1, 2);
  6. console.log(num); //3

注：()里加上任何东西都为表达式

报错：函数声明写法加执行符号

  1. function test() {
  2.   console.log('111');
  3. }()

正常运行：函数表达式加执行符号

  1. var test = function test() {
  2.   console.log('111');
  3. }()

正常运行：函数声明写法加执行符号且传入参数

  1. function test(a) {
  2.   console.log(1); //没有打印
  3. }(6);

逗号运算符返回逗号后面的数据

  1. console.log((6, 5)); //5
  2. var num = (2 - 1, 6 + 5, 24 + 1);
  3. console.log(num); //25
  • 说明一定是表达式才能被执行符号执行
  • 执行符号里面的逗号是一个运算符
  1. var test = function () {
  2.   console.log(1);
  3. }
  4. console.log(test); //function(){...}
  6. var test1 = function () {
  7.   console.log(2); //2
  8. }();
  9. console.log(test1); //undefined 说明销毁了

证明立即执行函数可以立即执行且执行完之后就销毁

  1. (function () {
  2.   console.log(123); //123
  3. })();
  5. (function test() {
  6.   console.log(123); //123
  7. })();

证明能够被执行符号执行的都为表达式，表达式会自动忽略函数名称

函数声明转换为表达式的方法：+，-，!, &&, ||

  1. + function test() { };
  2. - function test() { };
  3. ! function test() { };
  4. 1 && function test() { };
  5. 0 || function test() { };

循环点击案例

打印5个函数但没执行

  1. function test() {
  2.   var arr = [];
  3.   for (var i = 0; i < 5; i++) {
  4.     arr[i] = function () {
  5.       document.write(i + '');
  6.     }
  7.   }
  8.   return arr;
  9. }
  10. var myArr = test();
  11. console.log(myArr); //[f, f, f, f, f]

继续循环执行5个函数

  1. for (var j = 0; j < 5; j++) {
  2.   myArr[j]();
  3. }
  4. //5 5 5 5 5

打印结果为5个5，而不是1到5，为什么？

分析：

  1. //1. i < 5 进入循环
  2. //2. 第i项为一个声明函数但没执行函数
  3. //3. i++
  4. //4. 直到i=5无法进入循环
  5. //5. 此时return arr形成5个闭包且这时i = 5
  6. //6. 当循环j执行函数调用的时候拿到的是最后一项i的值为5
  7. //所以test函数里面arr[i]永远都为arr[5]
  1. function test() {
  2.   var arr = [];
  3.   var i = 0 //当i = 5 时 return arr
  4.   for (; i < 5;) {
  5.     arr[i] = function () {
  6.       document.write(i + '');
  7.     }
  8.     i++
  9.   }
  10.   console.log(i); //5
  12.   return arr;
  13. }
  14. var myArr = test();
  15. console.log(myArr); //[f, f, f, f, f]
  17. for (var j = 0; j < 5; j++) {
  18.   myArr[j]();
  19. }
  20. //5 5 5 5 5

如何打印0-5

  1. function test() {
  2.   var arr = [];
  4.   for (var i = 0; i < 5; i++) {
  5.     arr[i] = (function () {
  6.       document.write(i + '');
  7.     })();
  8.   }
  9.   return arr;
  10. }
  11. test();

继续简写

  1. function test() {
  2.   for (var i = 0; i < 5; i++) {
  3.     (function () {
  4.       document.write(i + '');
  5.     })();
  6.   }
  7. }
  8. test();

写法二借助参数

  1. function test() {
  2.   var arr = [];
  3.   for (var i = 0; i < 5; i++) {
  4.     arr[i] = function (num) {
  5.       document.write(num + '');
  6.     }
  7.   }
  8.   return arr;
  9. }
  10. var myArr = test();
  12. for (var j = 0; j < 5; j++) {
  13.   myArr[j](j);
  14. }

写法三 借助立即执行函数里新增一个声明函数保存的参数

  1. function test() {
  2.   var arr = [];
  3.   for (var i = 0; i < 5; i++) {
  4.     (function (f) {
  5.       arr[f] = function () {
  6.         document.write(f + '');
  7.       }
  8.     })(i);
  9.   }
  10.   return arr;
  11. }
  12. var myArr = test();
  13. for (var j = 0; j < 5; j++) {
  14.   myArr[j]();
  15. }

模块化

模块化开发：闭包的形式包装圣杯模式(企业级写法)

  • 避免环境污染

  • 利于后期维护和二次开发

  1. var inherit = (function () {
  2.   var Buffer = function () {}
  3.   return function (Target, Origin) {
  4.     Buffer.prototype = Origin.prototype;
  5.     Target.prototype = new Buffer();
  6.     Target.prototype.constructor = Target;
  7.     Target.prototype.super_class = Origin;
  8.   }
  9. })();
  11. Teacher.prototype.name = 'Mr.Zhang';
  13. function Teacher() {}
  14. function Student() {}
  16. var s = new Student;
  17. var t = new Teacher;
  19. console.log(s);
  20. console.log(t);
  22. inherit(Student, Teacher)

案例：

  1. var inherit = (function () {
  2.   var Buffer = function () {}
  3.   return function (Target, Origin) {
  4.     Buffer.prototype = Origin.prototype;
  5.     Target.prototype = new Buffer();
  6.     Target.prototype.constructor = Target;
  7.     Target.prototype.super_class = Origin;
  8.   }
  9. })();
  11. //创建一个独立的空间让其自启动
  12. var initProgrammer = (function () {
  13.   //父级构造函数
  14.   var Programmer = function () {}
  15.   //父级原型增加属性和方法
  16.   Programmer.prototype = {
  17.     name: '程序员',
  18.     tool: '计算机',
  19.     work: ' 编写英语程序',
  20.     duration: '10个小时',
  21.     say: function () {
  22.       console.log('我是一名' +
  23.         this.myName +
  24.         this.name +
  25.         ', 我的工作是用' +
  26.         this.tool +
  27.         this.work +
  28.         '我每天工作' +
  29.         this.duration +
  30.         '我的工作需要用到' +
  31.         this.lang.toString() +
  32.         '。');
  33.     }
  34.   }
  36.   //子级构造函数
  37.   //实例化以后可以访问父级原型的属性和方法
  38.   function FrontEnd() {}
  39.   function BackEnd() {}
  41.   //继承父级
  42.   inherit(FrontEnd, Programmer);
  43.   inherit(BackEnd, Programmer);
  45.   //子级原型上新增属性
  46.   FrontEnd.prototype.lang = ['HTML', 'CSS', 'JavaScript'];
  47.   FrontEnd.prototype.myName = '前端';
  48.   BackEnd.prototype.lang = ['JAVA', 'Node', 'SQL'];
  49.   BackEnd.prototype.myName = '后端';
  51.   //子级构造函数返回出去
  52.   //return外面必须要有变量接收返回值
  53.   return {
  54.     FrontEnd: FrontEnd,
  55.     BackEnd: BackEnd
  56.   }
  57. })();
  59. var frontEnd = new initProgrammer.FrontEnd();
  60. var bacnEnd = new initProgrammer.BackEnd();
  62. frontEnd.say();
  63. //我是一名前端程序员, 我的工作是用计算机 编写英语程序我每天工作10个小时我的工作需要用到HTML,CSS,JavaScript。
  64. bacnEnd.say();
  65. //我是一名后端程序员, 我的工作是用计算机 编写英语程序我每天工作10个小时我的工作需要用到JAVA,Node,SQL。

关于企业级协助开发

  1. window.onload = function () {
  2.   init();
  3. }
  5. function init() {
  6.   initCompute();
  7.   initFunctions();
  8. }
  10. var initCompute = (function () {
  11.   var a = 1,
  12.     b = 2;
  14.   function add() {
  15.     console.log(a + b);
  16.   }
  18.   function minus() {
  19.     console.log(a - b);
  20.   }
  22.   function mul() {
  23.     console.log(a * b);
  24.   }
  26.   function div() {
  27.     console.log(a / b);
  28.   }
  30.   //抛出的函数是需要执行的
  31.   return function () {
  32.     add();
  33.     minus();
  34.     mul();
  35.     div();
  36.   }
  37. })();
  39. var initFunctions = (function () {})();

插件开发

函数表达式变量接收立即执行函数的闭包

  1. var add = (function test() {
  2.   var a = 1;
  3.   function add() {
  4.     a++;
  5.     console.log(a);
  6.   }
  7.   return add;
  8. })();
  9. add(); //2
  10. add(); //3

利用全局变量保存立即执行函数的闭包

  1. (function test() {
  2.   var a = 1;
  3.   function add() {
  4.     a++;
  5.     console.log(a);
  6.   }
  7.   window.add = add;
  8. })();
  9. add(); //2
  10. add(); //3

插件化写法

  1. (function () {
  2.   function Test() { }
  3.   window.Test = Test;
  4. })();
  5. var test = new Test();