• 面向对象的JavaScript系列一,创建对象


    1.最简单的创建对象方法

    var person = new Object();
    person.name = "sam wu";
    person.age = 25;
    person.job = "frontend engineer";
    person.sayName = function(){
        alert(this.name);
    };
    
    person.sayName();

    2.工厂模式创建对象

    function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name);
        };    
        return o;
    }
    
    var person1 = createPerson("sam", 29, "frontend Engineer");
    var person2 = createPerson("rendy", 27, "Python");
    
    person1.sayName();   //"sam"
    person2.sayName();   //"rendy"

    3.构造函数模式

    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            alert(this.name);
        };    
    }
    
    var person1 = new Person("sam", 29, "frontend Engineer");
    var person2 = new Person("rendy", 27, "Python");
    
    person1.sayName();   //"sam"
    person2.sayName();   //"rendy"
    
    alert(person1 instanceof Object);  //true
    alert(person1 instanceof Person);  //true
    alert(person2 instanceof Object);  //true
    alert(person2 instanceof Person);  //true
    
    alert(person1.constructor == Person);  //true
    alert(person2.constructor == Person);  //true
    
    alert(person1.sayName == person2.sayName);  //false 

    4.原型模式

    可以让多个实例,共享属性和方法。

    function Person(){
    }
    
    Person.prototype.name = "sam";
    Person.prototype.age = 25;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        alert(this.name);
    };
    
    var person1 = new Person();
    person1.sayName();   //"sam"
    
    var person2 = new Person();
    person2.sayName();   //"sam"
    
    alert(person1.sayName == person2.sayName);  //true
    
    alert(Person.prototype.isPrototypeOf(person1));  //true
    alert(Person.prototype.isPrototypeOf(person2));  //true
    
    //only works if Object.getPrototypeOf() is available.ECMA5支持
    if (Object.getPrototypeOf){
        alert(Object.getPrototypeOf(person1) == Person.prototype);  //true
        alert(Object.getPrototypeOf(person1).name);  //"sam"
    }

    4.1 实例对象属性和原型属性的优先级

    function Person(){
    }
    
    Person.prototype.name = "sam";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        alert(this.name);
    };
    
    var person1 = new Person();
    var person2 = new Person();
    
    person1.name = "Rendy";
    alert(person1.name);   //"Rendy" – from instance 来自对象
    alert(person2.name);   //"sam" – from prototype 来自原型属性

    4.2 同名,只是屏蔽,非覆盖

    function Person(){
    }
    
    Person.prototype.name = "sam";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        alert(this.name);
    };
    
    var person1 = new Person();
    var person2 = new Person();
    
    person1.name = "rendy";
    alert(person1.name);   //"rendy" – from instance
    alert(person2.name);   //"sam" – from prototype
    
    delete person1.name;
    alert(person1.name);   //"sam" - from the prototype

    5.组合使用构造函数模式和原型模式

    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["Shelby", "Court"];
    }
    
    Person.prototype = {
        constructor: Person,
        sayName : function () {
            alert(this.name);
        }
    };
    
    var person1 = new Person("sam", 29, "Frontend Engineer");
    var person2 = new Person("rendy", 27, "Python");
    
    person1.friends.push("christ");
    
    alert(person1.friends);    //"Shelby,Court,christ"
    alert(person2.friends);    //"Shelby,Court"
    alert(person1.friends === person2.friends);  //false
    alert(person1.sayName === person2.sayName);  //true

    6.寄生构造函数函数模式

    function Person(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name);
        };    
        return o;
    }
    
    // 这里用了new关键字,但是Person函数的内容是返回一个对象。这样就不会生成一个新的实例。而是跟工厂模式效果一样。
    var friend = new Person("sam", 25, "Front Engineer");
    friend.sayName();  //"sam"

    以上内容来自《JavaScript高级程序设计第三版》

  • 相关阅读:
    Mybatis(三)
    Mybatis(二)
    Mybatis
    AJAX的跨域
    AJAX
    EL表达式与标准标签库JSTL
    java无脚本jsp页面-简介
    javaWeb的开发模式
    ADO.Net之SqlConnection、sqlcommand的应用
    翻译1-在SQL Server 2016中介绍微软R服务
  • 原文地址:https://www.cnblogs.com/samwu/p/3643959.html
Copyright © 2020-2023  润新知