zoukankan      html  css  js  c++  java
  • js继承方式

    从一个简单的需求开始
    现从前台抽离一个model名为Person,其有基本属性name和age,默认每个人都会说话,因此将说话的功能say放在了原型对象上,以供每个实例享用。现在对于Man来说,它需要继承Person的基本属性,并且在此基础上添加自己特有的属性。

     1 function Person(name,age){
     2     this.name = name;
     3     this.age = age;
     4 }
     5 Person.prototype.say = function(){
     6     console.log('my name is'+this.name);
     7 };
     8 function Man(){
     9     
    10 }

    1.原型链的继承

     1 function Person (name, age) {
     2   this.name = name;
     3   this.age = age;
     4 }
     5 Person.prototype.say = function(){
     6   console.log('hello, my name is ' + this.name);
     7 };
     8 function Man() {
     9 }
    10 Man.prototype = new Person('pursue');
    11 var man1 = new Man();
    12 man1.say(); //hello, my name is pursue
    13 var man2 = new Man();
    14 console.log(man1.say === man2.say);//true
    15 console.log(man1.name === man2.name);//true

    这种继承方式很直接,为了获取Person的所有属性方法(实例上的和原型上的),直接将父类的实例new Person('pursue')赋给了子类的原型,其实子类的实例man1,man2本身是一个完全空的对象,所有的属性和方法都得去原型链上去找,因而找到的属性方法都是同一个。 所以直接利用原型链继承是不现实的。

    2.利用构造函数继承

     1 function Person (name, age) {
     2   this.name = name;
     3   this.age = age;
     4 }
     5 Person.prototype.say = function(){
     6   console.log('hello, my name is ' + this.name);
     7 };
     8 function Man(name, age) {
     9   Person.apply(this, arguments);
    10 }
    11 //Man.prototype = new Person('pursue');
    12 var man1 = new Man('joe');
    13 var man2 = new Man('david');
    14 console.log(man1.name === man2.name);//false
    15 man1.say(); //say is not a function

    子类的在构造函数里利用了apply去调用父类的构造函数,从而达到继承父类属性的效果,比直接利用原型链要好的多,至少每个实例都有自己那一份资源,但是这种办法只能继承父类的实例属性,因而找不到say方法,为了继承父类所有的属性和方法,则就要修改原型链,从而引入了组合继承方式。

    3.组合继承

     1 function Person (name, age) {
     2   this.name = name;
     3   this.age = age;
     4 }
     5 Person.prototype.say = function(){
     6   console.log('hello, my name is ' + this.name);
     7 };
     8 function Man(name, age) {
     9   Person.apply(this, arguments);
    10 }
    11 Man.prototype = new Person();
    12 var man1 = new Man('joe');
    13 var man2 = new Man('david');
    14 console.log(man1.name === man2.name);//false
    15 console.log(man1.say === man2.say);//true
    16 man1.say(); //hello, my name is joe

    需要注意的是man1和man2的实例属性其实是覆盖了原型属性,但是并没要覆盖掉原型上的say方法(因为它们没有),所以这里man1.say === man2.say依然返回true,因而需要十分小心没有覆盖掉的原型属性,因为它是所有实例共有的。

    4.寄生组合继承

     1 function Person (name, age) {
     2       this.name = name;
     3       this.age = age;
     4 }
     5 Person.prototype.say = function(){
     6   console.log('hello, my name is ' + this.name);
     7 };
     8 function Man(name, age) {
     9   Person.apply(this, arguments);
    10 }
    11 Man.prototype = Object.create(Person.prototype);//a.
    12 Man.prototype.constructor = Man;//b.
    13 var man1 = new Man('pursue');
    14 var man2 = new Man('joe');
    15 console.log(man1.say == man2.say);
    16 console.log(man1.name == man2.name);

    其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上(a.和b.),这里用到了Object.creat(obj)方法,该方法会对传入的obj对象进行浅拷贝,类似于:

    1 function create(obj){
    2 function T(){};
    3 T.prototype = obj;
    4 return new T();
    5 }

    //因此,a.会将子类的原型对象与父类的原型对象进行很好的连接,而并不像一般的组合继承那样直接对子类的原型进行复制(如Man.prototype = new Person();),这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承,在实现上更加合理。
    //注意:代码b.并不会改变instanceof的结果,但是对于需要用到construcor的场景,这么做更加严谨。

  • 相关阅读:
    比率(ratio)|帕雷托图|雷达图|轮廓图|条形图|茎叶图|直方图|线图|折线图|间隔数据|比例数据|标准分数|标准差系数|离散系数|平均差|异众比率|四分位差|切比雪夫|右偏分布|
    质量控制|样本和总体|有限总体和无限总体|样本空间与变量空间|总体变异性|
    基因共线性
    q检验|新复极差法|LSD|二因素方差分析
    Tript协议|伯尔尼公约|著作权|立法宗旨|自动保护|著作权集体管理|
    两块式开头样板
    三块式开头样板
    listening-conversation|信息简写|Generally|回答|矛盾
    Listening-lecture|主旨题|术语解释|举例原则|Crash course 哔哩哔哩
    Do jobs|permanent|secure job|Move|Look after|provide sb with sth|Move|Enjoy a good time|Learn about|Be fond of|Have a clearer idea|String quarter|Be subject to|A has little with B|Pigment
  • 原文地址:https://www.cnblogs.com/jiechen/p/5587557.html
Copyright © 2011-2022 走看看