原型链继承

  1. /*1.原型链继承*/
  2. function parent(){
  3.     this.name = 'parent'
  4. }
  6. parent.prototype.getname = function(){
  7.     console.log(this.name)
  8. }
  10. function child(){
  11.     parent.call(this)
  12. }
  14. child.prototype = new parent()
  18. var child2 = new child()
  20. child2.getname()  //parent
  22. /*
  23. 由于new出来的是一个对象，所以必须要用对象名.key的方式访问
  24. */
  26. /*
  27. 1.引用类型的属性被所有实例共享，举个例子：
  28. */
  30. var child3 = new child()
  32. child3.getname()   //parent
  34. child3.name = '3'
  36. child2.getname()   //3
  37. child3.getname()   //3
  39. /*
  40. 在创建 Child 的实例时，不能向Parent传参
  41. */
  43. function parent2(){
  44.     this.name = 'parent2'
  45. }
  47. function child4(){
  48.     parent2.call(this)
  49. }

借用构造函数继承

  1. function parent(){
  2.     this.name = ['parent','1']
  3. }
  5. function child(){
  6.     parent.call(this)
  7. }
  9. var p1 = new child()
  11. var p2 = new child()
  13. p1.name.push('p1')
  15. p2.name.push('p2')
  17. console.log(p1.name)
  18. console.log(p2.name)
  20. //  ["parent", "1", "p1"]
  21. //  ["parent", "1", "p2"]
  24. /*
  25. 优点:
  26. 1.避免了引用类型的属性被所有实例共享
  27. 2.可以在child中向parent传参
  28. */
  30. /*
  31. 缺点：方法都在构造函数中定义，每次创建实例都会创建一遍方法。
  32. */

原型式继承

  1. /*
  2. es5 Object.create模拟实现
  3. */
  4. function objectcreate(object){
  5.     function f(){}
  6.     f.prototype = object
  7.     return new f()
  8. }
  10. var obj = {
  11.     name : '123',
  12.     age : [17,18]
  13. }
  15. var p1 = objectcreate(obj)
  16. var p2 = objectcreate(obj)
  18. p1.name  = '456'
  19. console.log(p2.name)    // 123
  21. p1.age.push('p1')
  22. console.log(p2.age) // [17, 18, "p1"]
  25. //缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

寄生式继承

  1. //寄生式继承
  2. function createobj(o){
  3.     var clone = Object.create(o)
  4.     clone.sayName = function(){
  5.         console.log('hi')
  6.     }
  7.     return clone
  8. }
  10. //创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。
  11. // 缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

组合继承

  1. /*
  2. 原型链继承和经典继承双剑合璧。
  3. */
  5. var parent = function(){
  6.     this.name = parent
  7.     this.color = ['red','blue']
  8. }
  10. parent.prototype.getname = function(){
  11.     console.log(this.name)
  12. }
  14. var child = function(name,age){
  15.     parent.call(this,name)
  16.     this.age = age
  17. }
  19. child.prototype = new parent()
  23. var p1 = new child()
  25. var p2 = new child()
  28. console.log(p1)
  30. console.log(p2)
  32. //child {color: Array(2), age: undefined, name: ƒ}
  33. //child {color: Array(2), age: undefined, name: ƒ}
  35. //优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式
  36. // 组合继承最大的缺点是会调用两次父构造函数。

寄生组合式继承

  1. /*组合继承
  2. function parent(name,color){
  3.     this.name = name
  4.     this.color = ['red','blue']
  5. }
  7. parent.prototype.getname = function(){
  8.     console.log(this.name)
  9. }
  11. function child(name,age){
  12.     parent.call(this,name)
  13.     this.age = age
  14. }
  16. child.prototype = new parent()
  18. var child1 = new child('kevin', '18');
  20. console.log(child1)
  21. */
  23. /*
  24. 组合继承最大的缺点是会调用两次父构造函数。
  26. 一次是设置子类型实例的原型的时候：
  27. child.prototype = new Parent();
  28. 一次在创建子类型实例的时候：
  29. var child1 = new child('kevin', '18');
  31. 回想下 new 的模拟实现，其实在这句中，我们会执行：
  32. parent.call(this, name);
  33. 在这里，我们又会调用了一次 Parent 构造函数
  34. 所以，在这个例子中，如果我们打印 child1 对象，我们会发现 child.prototype 和 child1 都有一个属性为colors，属性值为['red', 'blue', 'green']。
  36. console.log(child.prototype)
  37. console.log(child1)
  38. */
  40. /*
  41. 寄生组合式继承
  42. */
  44. function parent(name,color){
  45.     this.name = 'parent'
  46.     this.color = ['red','blue']
  47. }
  49. function child(name, age) {
  50.     parent.call(this, name);
  51.     this.age = age;
  52. }
  54. function createobj(o){
  55.     function f(){}
  56.     f.prototype = o     
  57.     /*
  58.     {constructor: ƒ}
  59.     constructor: ƒ parent(name,color)
  60.     __proto__: Object
  61.     */
  62.     return new f()
  63. }
  65. function prototypeobj(child,parent){
  66.     var prototype = createobj(parent.prototype)
  67.     prototype.constructor = child
  68.     child.prototype = prototype
  69. }
  72. prototypeobj(child,parent)
  74. var p1 = new child()
  76. var p2 = new child()
  78. p1.name = 'p1'
  80. p2.name = 'p2'
  82. console.log(p1)
  83. console.log(p2)
  84. //child {name: "p1", color: Array(2), age: undefined}
  85. //child {name: "p2", color: Array(2), age: undefined}
  87. /*
  88. 寄生组合原理：
  89. p1的constructor为child，__proto__中的constructor为parent
  90. createobj(parent.prototype) 这一步的功能是创建一个对象，这个对象是parent的实例，具有parent的constructor方法
  91. prototype.constructor = child 这一步将prototype的constructor设为child函数
  92. child.prototype = prototype 设置child的原型为prototype 这样child就继承了parent的constructor     
  94. 通过prototypeobj方法，child的prototype有了两个constructor，一份是原本自己的，另一份通过__proto__ 寻找到父级的constructor
  95. */
  98. /*
  99. 三步骤
  100. 首先先创建个变量 
  101. var prototype = Object.create(父类的prototype) 
  102. prototype.constructor = child(子类的constructor)
  103. child.prototype(子类的prototype) = prototype
  104. */

es6 extend

  1. class Point{
  2.     constructor(x){
  3.         this.x = x;
  4.         this.p = 2;
  5.         this.j = 3;
  6.     }
  7.     print(){
  8.         return this.x
  9.     }
  10.     m(){
  11.         return this.p
  12.     }
  13.     static b(){
  14.         console.log(this.c())
  15.     }
  16.     static c(){
  17.         return 'world'
  18.     }
  19. }
  20. Point.prototype.z = 2
  22. //调用
  23. var p1 = new Point('p1') //更es5一样，调用Point构造函数new一个实例对象
  24. console.log(p1)
  25. //Point {x: "p1", p: 2}
  27. /*
  28. constructor是该类的构造函数，即使你没有创建，系统也会自动生成一个。一般 constructor 方法返回实例对象 this ，但是也可以指定 constructor 
  29. 方法返回一个全新的对象，让返回的实例对象不是该类的实例。
  30. */
  32. /*
  33. 上面的代码用es5可以这样表达
  34. function Point(x){
  35.     this.x = x;
  36.     this.p = 2;
  37. }
  39. Point.prototype.print = function(){
  40.     return this.x
  41. }
  42. */
  44. /*
  45. super
  46. */
  48. /*
  49. 函数时使用
  50. super只能在子类的constructor使用，不能在别的方法调用
  51. */
  52. class colorPoint extends Point{
  53.     constructor(x){
  54.         super(x)    // 调用父类的constructor(x)
  55.         this.y = 2
  56.         super.y = 3
  57.     }
  58.     b(){
  59.         console.log(super.print())  //调用父类的print() this指向子类colorPoint的实例
  60.         console.log(super.m())  //调用父类的m() 结果是2
  61.         console.log(super.z)    //获取父类的prototype.z属性
  62.     }
  63. }
  65. let p2 = new colorPoint('p2')
  66. //colorPoint {x: "p2", p: 2}
  68. /*
  69. 对象时使用
  70. super.print()，将super当作一个对象使用，super指向Point.prototype，此时print就是Point.prototype.print方法
  71. super.z 由于super指向Point.prototype，此时z就是Point.prototype.z
  72. super.y赋值为3，这时等同于对this.y赋值为3。而当读取super.y的时候，读的是A.prototype.y 显示为undefined
  73. */
  75. /*
  76. Object.getPrototypeOf方法可以用来从子类上获取父类
  77. */
  78. Object.getPrototypeOf(colorPoint) === Point //true
  81. /*
  82. static 静态方法
  83. static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
  84. 1.可以被子类继承
  85. 2.只能通过类调用
  86. 3.this指本类，不指实例
  87. 4.通过this调用只能调用本类定义的static方法
  88. */
  89. Point.b()
  90. // world
  91. colorPoint.b()
  92. // world
  95. /*
  96. new.target
  97. new.target属性允许你检测函数或构造方法是否通过是通过new运算符被调用的。
  98. */