面向对象的JavaScript之继续(一) 类式继续

弁言

面向对象的编程言语都具继续这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设想,所以它的完成体式格局也是基于原型(Prototype)完成的.

继续的体式格局

  • 类式继续

  • 组织函数继续

  • 组合继续

  • 原型式继续

  • 寄生式继续

  • 寄生组合式继续

1.类式继续

//声明父类
function SuperClass(){
    //值范例
    this.superValue = true;
    //援用范例
    this.book = ['c','java','htnl']
}

//为父类增加要领
SuperClass.prototype.getSuperValue =function(){
    return this.superValue;
}

//声明子类
function SubClass(){
    this.subValue = false;
}
//继续父类
SubClass.prototype = new SuperClass();

//为子类增加要领
SubClass.prototype.getSubValue = function(){
    return this.subValue;
}

//测试
var a = new SubClass(); 
var b = new SubClass(); 
console.log(a.getSubValue()); //false
console.log(a.getSuperValue());  //true

console.log(a.book);//["c", "java", "htnl"]
console.log(b.book);//["c", "java", "htnl"]
a.book.push('css');
console.log(a.book);//["c", "java", "htnl", "css"]
console.log(b.book);//["c", "java", "htnl", "css"]

console.log(a.getSuperValue())//true
console.log(b.getSuperValue())//true
a.superValue = 'a';

console.log(a.getSuperValue())//a
console.log(b.getSuperValue())//true

console.log(a.getSubValue())//false
console.log(b.getSubValue())//false
a.subValue = 'sub';

console.log(a.getSubValue())//sub
console.log(b.getSubValue())//false

经由过程测试能够得知类式继续有以下特性:

  1. 经由过程子类原型继续父类的实例 完成继续.

    子类实例的原型都是父类实例,所以 a b 都是用的是 父类的实例.所以它的属性共用(值范例,援用范例)。那你们肯定会问:为何book 共用,而 subValue 没有共用呢,下面就给你诠释,请看2
    
  2. 援用范例是共用的,值范例是私用的。

    实在:值范例按理说应当和值范例一样,都是共用的,然则由于 this 的缘由,this.superValue寻值时由近到远,先寻觅 a,若 a 没有则寻觅 a 的原型`prototype`,一向往上,若没有则返回`"undefined"`,如许你就晓得为何给a.book.push('css'); 以后 b.book 也发生了转变,由于它是寻觅到原型上的 book 值,而a.superValue = 'a'; 则直接给 a 增加了个 superValue 属性,而没有去 原型`prototype`的superValue赋值,则输出的时刻也是就近.
    

下一节解说 面向对象的JavaScript之继续(二) 组织函数继续

参考

本人对类式继续的一点点明白,如果那边诠释的有题目,请多指教,感谢!

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