• 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

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

  • 相关阅读:
    CentOS6.2编译安装Nginx1.2.0
    mysql之主从复制篇
    CentOS6.2编译安装PHP5.4.0
    c# 多线程 编程
    QQ空间及邮箱验证码登录的校验方式及自动登录的解决方案
    C# 动态编译、动态执行、动态调试
    在Visual C#中用ListView显示数据记录
    推荐一个免费的HTTP抓包分析工具 Fiddler Web Debugger
    C#简繁体转换方法(Microsoft.Office.Interop.Word)
    C#读取字符串类型XML
  • 原文地址:https://www.cnblogs.com/czzblog/p/3150682.html
Copyright © 2020-2023  润新知