美文网首页
Javascript OOP 笔记

Javascript OOP 笔记

作者: 纪田君 | 来源:发表于2018-06-16 17:35 被阅读0次

    创建对象


    工厂模式

        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name)
        };
        return 0;
    }
    
    var person1 = createPerson("xiaohong",13,"ji");
    var person2 = createPerson("xiaoming",16,"ya");
    

    //*工厂模式的缺点是 没有解决对象识别问题(即怎么知道一个对象的类型)


    构造函数模式

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = New Function("alert(this.name)")
    }
    
    var person1 = new Person("xiaohong",13,"ji");
    var person2 = new Person("xiaoming",16,"ya");
    

    //用new操作符创建新实例.步骤有以下4点
    //
    1)创建一个新对象
    //2)将构造函数赋的作用域赋值给新对象(this指向新对象)
    //
    3)执行构造函数代码(为新对象添加属性)
    //4)返回新对象
    //
    构造函数与其他函数的区别是,调用它们的方法不同而已(用new调用的函数就会变成构造函数)


    原型模式

    function Person(){ }
    
    Person.prototype.name = "xiaohong"
    Person.prototype.age = 13
    Person.prototype.job = "ji"
    Person.prototype.sayName = function() {
        alert(this.name)
    }
    
    var person1 = new Person()
    person1.sayName() //"xiaohong"
    var person2 = new Person()
    person2.sayName() //"xiaohong"
    

    //*实例在没有重写的情况下只有其实例化对象的原型一个属性.如下

    alert(person1.name) //"xiaohong" --来自原型
    person1.hasOwnProperty("name") //false
    person1.name = "xiaoming"
    alert(person1.name) //"xiaoming" --来自实例
    person1.hasOwnProperty("name") //true
    

    //调用构造函数时会为实例添加一个指向最初原型的指针.当原型修
    //改为另一个对象时就等于切断了构造函数与最初原型型之间的练习
    //
    如下:

    function Person(){ }
    var friend = new Person()
    Person.prototype = {
        constructor:Person,
        name : "xiaohong",
        age : 13,
        job : "ji",
        sayName: function(){
            alert(this.name)
        }
    }
    friend.sayName() //error
    

    //原型的缺点是共享数据.当向实例引用的原型属性数组中添加元素
    //会直接添加到原型从而改变所有的实例的值
    //
    如下

    function Person(){  }
    Person.prototype = {
        name : "xiaohong",
        age : 13
        friends : ["xiaoming","xiaogang"],
        sayName : function () {...}
    }
    var person1 = new Person();
    var person2 = new Person();
    
    person1.friends.push("daming")
    
    alert(person1.friends) //"xiaoming,xiaogang,daming"
    alert(person2.friends) //"xiaoming,xiaogang,daming"
    

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

    //*构造函数定义实例属性;原型定义共享方法和共享属性

    function Person(){
        this.name = name
        this.age = age
        this.job = job
        this.friends = ["daming","xiaogong"]
    }
    
    Person.prototype = {
        construtor: Person,
        sayName: function(){
            alert(this.name)
        }
    }
    
    var person1 = new Person("xiaohong",13,"ji");
    var person2 = new Person("xiaoming",16,"ya");
    
    person1.friends.push("laowang")
    alert(person1.friends) // "daming,xiaogang,laowang"
    alert(person2.friends) // "daming,xiaogang"
    alert(person1.friends === person2.friends) // false
    alert(person1.sayName === person2.sayName) // true
    

    相关文档

    MDN ,Javascript高级程序设计

    相关文章

      网友评论

          本文标题:Javascript OOP 笔记

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