• js自定义类和对象及继承


    1.工厂方式
    <script type="text/javascript">

    function createObject(name){

           var p = new Object();

           p.name=name;

           p.say = function(){alert(p.name+'ff');}

           return p;

    }

    var p1 = createObject("p1");

    var p2 = createObject("p2");

    alert(p1.name+" "+p2.name);

    p1.say();p2.say();

    alert(p1.say==p2.say); //false

    </script>

    问题:每创建一个对象,对象的方法是新对象,浪费资源



    2、构造函数方式

    <script type="text/javascript">

    function Person(name){

    this.name = name;

    this.say = function(){

    alert("I am "+this.name);

    }

    }

    var p1 = new Person("wang");

    var p2 = new Person("li");

    p1.say();

    p2.say();

    alert(p1.say==p2.say); //false



    </script>



    问题:

    创建对象时比工厂方法更易于理解。

    和工厂方法一样,每个对象都有自己的方法,浪费资源。





    3、原型方式



    function Person(){}

    Person.prototype.name = "";

    Person.prototype.say = function(){

    alert("I am "+this.name);

    }



    var p1 = new Person();

    var p2 = new Person();

    alert(p1.say == p2.say);//true



    问题:无法在构造方法中传递参数,所有对象共享属性。

    优点:对象共方法,节约资源。



    4、构造方法+原型方式

    function Person(name){

           this.name = name;

    }

    Person.prototype.say = function(){

           alert("I am "+this.name);

    }

    var p1 = new Person("wang");

    var p2 = new Person("li");

    p1.say();

    p2.say();

    alert(p1.say==p2.say); //true



    优点:解决了前面提到的问题。

    问题:封装不够完美。



    5、动态原形方式

    function Person(name){

    this.name = name;

    if(Person.prototype.say == undefined){

           Person.prototype.say = function(){

                  alert("I am "+this.name);

                  }

           }

    }

    var p1 = new Person("wang");

    var p2 = new Person("li");

    p1.say();

    p2.say();

    alert(p1.say==p2.say); //true



    结论:一种完美的解决方案。



    6、对象的创建 - JSON

    var person = {};



    var girl = {

    name:“miss wang”,

    age:20,

    show = function(){

           alert("my name is " + this.name);

    }

    }



    继承的实现方式

    1、  对象冒充



    function People(name){

    this.name = name;

    this.say = function(){

    alert("I am "+this.name);

           }

    }

    function WhitePeople(name){

    this.inherit = People;

    this.inherit(name);

    delete this.inherit;



    this.color = function(){

                  alert("I am white people.");

    }

    }

    var p = new WhitePeople("wang");

    p.say();

    p.color();

    alert(p instanceof People); //false

    结论:支持多重继承,但后面的类可以覆盖前面类的属性和方法。继承后的对象类型和父类对象不匹配



    2、利用call()和apply()冒充

    function People(name,age){

    this.name = name;

    this.age = age;

    this.say = function(){

    alert("I am "+this.name+"  "+this.age);

           }

    }

    function WhitePeople(name,age){

    //People.call(this,name,age);//call方式以多个参数进行传值

    People.apply(this,[name,age]);//apply方式以数组方式进行传值



    this.color = function(){

                  alert("I am white people.");

    }

    }

    var p = new WhitePeople("wang",34);

    p.say();



    p.color();



    alert(p instanceof People);





    3、原型链继承

    //父类

    function People(name){

           this.name = name;

    }

    People.prototype.say = function(){

           alert("I am "+this.name);

    }



    //子类

    function ChinaPeople(name,area){

           People.call(this,name);

           this.area = area;

    }

    ChinaPeople.prototype = new People();

    ChinaPeople.prototype.from = function(){

           alert("I'am from "+this.area);

    }



    var p = new ChinaPeople("wang","si chuan");

    p.say();

    p.from();

    alert(p instanceof People); //true

    结论:不支持多重继承,继承后的对象类型和父类对象匹配

  • 相关阅读:
    BZOJ 5308 [ZJOI2018] Day2T2 胖 | 二分 ST表
    CodeForces 464E The Classic Problem | 呆克斯歘 主席树维护高精度
    BZOJ5298 [CQOI2018] 交错序列 | 矩阵乘法和一个trick
    # BZOJ5300 [CQOI2018]九连环 题解 | 高精度 FFT
    [BZOJ5248] 2018九省联考 D1T1 一双木棋 | 博弈论 状压DP
    【2018九省联考】后的瞎扯
    BZOJ 4671 异或图 | 线性基 容斥 DFS
    Luogu 4294 [WC2008]游览计划 | 斯坦纳树
    BZOJ 2434 阿狸的打字机 | AC自动机
    UOJ#7. 【NOI2014】购票 | 线段树 凸包优化DP
  • 原文地址:https://www.cnblogs.com/czzblog/p/3150682.html
Copyright © 2020-2023  润新知