JavaScript继续的六种体式格局

2024年5月19日 120次阅读 来源: 莉莉安

这是 近来在进修js继续时看了多篇文章以及自我总结的进修笔记。

目次：
一：原型链
二：组织函数
三：原型链和组织函数组合继续
四：原型式
五：寄生式
六：寄生组合式

1、原型链

function Super(){
  this.name = 'lily';
  this.age = 21;
  this.arr = [1,2,3]
}
function Sub(){}
Sub.prototype = new Super();//中心 拿父类实例来充任子类原型对象
var l1 = new Sub();
var l2 = new Sub();
l1.name = 'gan';
l1.arr.push(4)
l(l1.name)//'gan'
l(l2.name)//'lily'
l(l1.arr)//[1, 2, 3, 4]
l(l2.arr)//[1, 2, 3, 4]

长处：easy
瑕玷： 1，原型对象的援用属性是一切实例同享的， l2.arr随着 l1.arr一同变化

2，组织函数

function Super(name,age){
  this.name = name;
  this.age = age;
  this.arr = [1,2,3];
  this.foo = function(){
  //..
  }
}
function Sub(name,age){
  Super.call(this,[name,age])//中心 在子范例组织函数中挪用超范例组织函数
}
var l1 = new Sub('lily',21);
var l2 = new Sub('gan',22);
l1.arr.push(4)
l(l1.name)//["lily", 21]
l(l2.name)//["gan", 22]
l(l1.arr)//[1, 2, 3, 4]
l(l2.arr)//[1, 2, 3]
l(l1.foo === l2.foo)//false

长处： 处理了子类实例同享父类援用属性的题目 可传参
瑕玷：要领都在组织函数中定义，糟蹋内存还不能复用。在超范例的原型中定义的要领对子范例而言不可见：

Super.prototype.sayName = function(){
  l(this.name)
}
l(l1.sayName)//undefined

3,组合式(最经常使用)

function Super(name){
  this.name = name;
  this.age = 21;
  this.arr = [1,2,3];
}
Super.prototype.sayName = function(){
  return this.name
}
function Sub(name){
  Super.call(this,name)//中心
}
Sub.prototype = new Super();//中心
Sub.prototype.constructor = Sub;
var l1 = new Sub('lily');
l(l1.sayName())//lily

长处：从已有对象衍生新对象，不需要建立自定义范例（更像是对象复制，而不是继续）
瑕玷：原型援用属性会被一切实例同享，由于是用全部父类对象来充任了子类原型对象，所以这个缺点无可避免；没法完成代码复用

4，原型式

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = 'lily';
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
var Sub = new Super();
l(Sub)//Super {name: "lily", age: 21}
var sup = object(Sub)
l(sup)//F {__proto__: Super}获得一个“贞洁”的新对象（“贞洁”是由于没有实例属性），再逐渐加强之（添补实例属性）
sup.sex = 'girl'
l(sup)//F {sex: "girl",__proto__: Super}
l(sup.arr) //[1,2,3,4]
l(sup1.arr)//[1,2,3,4]

长处：从已有对象衍生新对象，不需要建立自定义范例（更像是对象复制，而不是继续）
瑕玷：原型援用属性会被一切实例同享，由于是用全部父类对象来充任了子类原型对象，所以这个缺点无可避免；没法完成代码复用

5,寄生式

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = 'lily';
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
function getSubObject(obj){
  // 建立新对象
  var clone = object(obj); // 中心
  // 加强
  clone.attr1 = 1;
  clone.attr2 = 2;
  //clone.attr3...
  return clone;
}
var Sub = getSubObject(new Super());
l(Sub)//Super {name: "lily", age: 21}
var sup = object(Sub)
var sup1 = object(Sub)
l(sup)//F {__proto__: Super}获得一个“贞洁”的新对象（“贞洁”是由于没有实例属性），再逐渐加强之（添补实例属性）
l(sup.arr)
l(sup1.arr)

6，寄生组合式

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = 'lily';
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
function Sub(){
  Super.call(this)
}
var proto = object(Super.prototype); // 中心
proto.constructor = Sub; // 中心
Sub.prototype = proto; // 中心

var sub = new Sub();
l(sub.name);
l(sub.arr);

用object(Super.prototype);切掉了原型对象上过剩的那份父类实例属性

    原文作者：莉莉安
    原文地址: https://segmentfault.com/a/1190000007910962
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞