美文网首页
收藏了也不看的JavaScript,面向对象程序设计(下)!

收藏了也不看的JavaScript,面向对象程序设计(下)!

作者: 自律更自由 | 来源:发表于2017-12-18 10:56 被阅读13次

    今天接着上一篇,昨天其实因为这周太累了,赶着上线每天加班。昨天12点的时候,脖子都开始疼了。好了不废话了开始了~

    继承

    继承:子类继承父类中的属性和方法 , 这些属性和方法在子类中不需要实现过程

    继承的种类:

    单继承:一个子类只拥有一个父类

    多继承:一个子类可以拥有多个父类

    原型链

    这里真的呼吁学js的小伙伴一定要看红宝书哦。

    function SuperType(){

    this.property = true;

    }

    SuperType.prototype.getSuperValue = function(){

    };

    function SubType(){

    this.subproperty = false;

    }

    //SuperType

    SubType.prototype = new SuperType();

    SubType.prototype.getSubValue = function (){

    return this.subproperty;

    };

    var instance = new SubType();

    alert(instance.getSuperValue()); //true

    原型链的问题

    function SuperType(){

    this.colors = ["red", "blue", "green"];

    alert(instance1.colors); //"red,blue,green,black"

    }

    function SubType(){}

    //SuperType

    SubType.prototype = new SuperType();

    var instance1 = new SubType();

    instance1.colors.push("black");

    var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black"

    原型继承

    var person = {

    name: "Nicholas",

    friends: ["Shelby", "Court", "Van"]

    };

    var anotherPerson = object(person);

    anotherPerson.name = "Greg";

    anotherPerson.friends.push("Rob");

    var yetAnotherPerson = object(person);

    yetAnotherPerson.name = "Linda";

    yetAnotherPerson.friends.push("Barbie");

    alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

    var person = {

    name: "Nicholas",

    friends: ["Shelby", "Court", "Van"]

    };

    var anotherPerson = Object.create(person);

    anotherPerson.name = "Greg";

    anotherPerson.friends.push("Rob");

    var yetAnotherPerson = Object.create(person);

    yetAnotherPerson.name = "Linda";

    yetAnotherPerson.friends.push("Barbie");

    alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

    继承方法

    继承方式一、通过改变构造函数(父类)的执行环境 ---在子类中添加一个特殊属性,这个属性值指向父类

    function Father(){

    this.money = 999999;

    this.eat = function(){

    console.log("吃肉");

    }

    this.drink = function(){

    console.log("喝酒");

    }

    }

    function Son(){

    this.parent = Father; //为子类添加一个特有的属性 改变父类的执行环境 类似:this.parent = function (){....}

    this.parent();//改变了执行环境

    }

    var son = new Son();

    继承方式二、通过call方法实现

    call方法使用:

    父类.call(子类[,子类继承父类的属性]);

    function Father(firstname){

    this.firstname = firstname;

    this.money = 200000000;

    this.drink = function(){

    console.log("喝酒");

    }

    this.dance = function(){

    console.log("跳舞");

    }

    }

    function Son(firstname){

    Father.call(this,firstname );

    }

    继承方式三、通过apply继承

    apply使用方法:

    父类.apply(子类对象,数组) 数组中存储的是从父类继承过来的属性

    function xiaomi5(price,size,memsize){

    this.price = price;

    this.size = size;

    this.memsize = memsize;

    this.phoneCall = function(){

    console.log("打电话");

    }

    this.sendMessage = function(){

    console.log("发短信");

    }

    }

    function xiaomi5Plus(price,size,memsize,color){

    this.color = color;//特有属性

    //xiaomi5.apply(this,[price,size,memsize]);

    xiaomi5.apply(this,arguments);//通过arguments接收

    this.playMusic = function(){

    return "播放音乐";

    }

    this.photo = function(){

    console.log("照相");

    }

    }

    var xm = new xiaomi5Plus(789,7,64,"white");

    console.log(xm);

    组合继承

    这里要摘出来说一下

    通过apply或call继承实例属性

    通过原型方式 继承 原型方法

    function Father(money,firstname){

    this.money = money;

    this.firstname = firstname;

    }

    Father.prototype.dance = function(){

    console.log("跳舞");

    }

    Father.prototype.sleep= function(){

    console.log("睡觉");

    }

    function Son(money,firstname){

    Father.call(this,money,firstname);

    }

    //原型继承

    Son.prototype = new Father();

    var son = new Son("200000","王");

    son.dance();

    function SuperType(name){

    this.name = name;

    this.colors = ["red", "blue", "green"];

    }

    SuperType.prototype.sayName = function(){

    alert(this.name);

    JavaScript instanceof isPrototypeOf()

    function object(o){

    function F(){}

    object() object()13

    };

    function SubType(name, age){

    //SuperType.call(this, name);

    this.age = age;

    }

    //

    SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){

    alert(this.age);

    };

    var instance1 = new SubType("Nicholas", 29);

    instance1.colors.push("black");

    alert(instance1.colors);

    instance1.sayName();

    instance1.sayAge();

    //"red,blue,green,black"

    //"Nicholas";

    //29

    var instance2 = new SubType("Greg", 27);

    alert(instance2.colors);//"red,blue,green"

    instance2.sayName();//"Greg";

    instance2.sayAge();//27

    寄生组合式继承

    这个继承方式,如果不看红宝书的情况下,你很少会知道有这个方法。我曾经面试用这个方法装了一发哈哈哈

    function SuperType(name){

    this.name = name;

    this.colors = ["red", "blue", "green"];

    }

    SuperType.prototype.sayName = function(){

    alert(this.name);

    };

    function SubType(name, age){

    SuperType.call(this, name);

    this.age = age;

    }

    SubType.prototype = new SuperType();

    SubType.prototype.constructor = SubType;

    SubType.prototype.sayAge = function(){

    alert(this.age);

    };

    function inheritPrototype(subType, superType){

    var prototype = object(superType.prototype);

    prototype.constructor = subType;

    subType.prototype = prototype;

    }

    function SuperType(name){

    this.name = name;

    this.colors = ["red", "blue", "green"];

    }

    SuperType.prototype.sayName = function(){

    alert(this.name);

    };

    function SubType(name, age){

    SuperType.call(this, name);

    this.age = age;

    }

    inheritPrototype(SubType, SuperType);

    SubType.prototype.sayAge = function(){

    alert(this.age);

    }

    总结

    欢迎大家持续关注。号内有多个专题,小程序(持续更新中),Javascript(持续更新),Vue等学习笔记。觉得有收获的可以收藏关注,欢迎骚扰,一起学习,共同进步

    最后推广一下自己的小程序,如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

    自律更自由,一只喜欢锻炼的程序猿,嘿嘿。

    你都看到这了,不点个关注就过分了哈~

    相关文章

      网友评论

          本文标题:收藏了也不看的JavaScript,面向对象程序设计(下)!

          本文链接:https://www.haomeiwen.com/subject/ypipwxtx.html