第六章(2):创建对象

作者: 日暮途远_ | 来源:发表于2017-07-02 18:18 被阅读9次

    创建对象的几种模式

    • 工厂模式
    /**
     * 工厂模式
     * 缺点:对象无法识别
     * @param name
     * @param age
     * @param msg
     */
    function createPerson(name, age, msg) {
      var o = Object.create({});
      o.name = name;
      o.age = age;
      o.say = function () {
        console.log(msg);
      }
    
      return o;
    }
    var p1 = createPerson('小和尚', 18, '皈依佛,皈依法,皈依僧');
    var p2 = createPerson('动情的小和尚', 18, '皈依佛,皈依法,皈依僧,皈依秀');
    console.log(p1, p2) // Object {name: "小和尚", age: 18, say: function} Object {name: "动情的小和尚", age: 18, say: function}
    
    • 构造函数模式
    /**
     * 构造器模式(函数的第一个名字大写,借鉴其他OO语言,为了与其他普通函数做区分,创建对象的时候通过new来创建)
     * 创建对象的4个步骤:
     * (1)创建一个新对象
     * (2)将构造函数的作用域赋给新对象
     * (3)执行构造函数中的代码(为这个新对象添加属性和方法)
     * (4)返回新对象
     * 缺点:每个方法都需要重新创建。
     * 优点:解决了工厂模式无法识别对象的问题
     * @param name
     * @param age
     * @param msg
     * @constructor
     */
    function Person(name, age, msg) {
      this.name = name;
      this.age = age;
      this.say = function () {
        console.log(msg)
      }
    }
    var c1 = new Person('小和尚', 18, '皈依佛,皈依法,皈依僧');
    var c2 = new Person('动情的小和尚', 18, '皈依佛,皈依法,皈依僧,皈依秀');
    console.log(c1 instanceof Person) // true
    console.log(c2 instanceof Person) // true
    console.log(c1.say === c2.say)  // false
    
    • 原型模式

    我们创建的每一个函数,都有一个prototype属性。这个属性是一个指针,指向一个对象。这个对象为通过调用此构造函数创建的对象服务,这个对象就是原型对象。

    • 通过原型模式创建的对象之间的关系。

    • 读取某个对象的属性的执行过程。
      先从对象实例本身开始搜索,如果找到则返回。否则继续搜索该对象的原型对象,找到则返回。

    • 通过delete方法可以删除实例的属性。

    • 实例

    /**
     * 原型模式
     * 缺点:实例的属性和方法是共享的
     * @param name
     * @param age
     * @constructor
     */
    function Student() {}
    Student.prototype.name = '小明';
    Student.prototype.age = '18';
    Student.prototype.say = function () {
      console.log(this.name)
    }
    var s1 = new Student();
    var s2 = new Student();
    console.log(s1.name, s2.name) // 小明 小明
    console.log(s1.say === s2.say)  // true
    // 为实例创建的属性名如果和原型中的属性名相同,则会会覆盖原型中的属性。
    s1.name = '小白';
    console.log(s1) //Student {name: "小白"}
    console.log(s1.name, s2.name) // 小白 小明
    delete s1.name;
    console.log('delete: ', s1.name, s2.name) // delete:  小明 小明
    // getPrototypeOf方法返回对象的[prototype]的值
    console.log(Object.getPrototypeOf(s1))  // Object {name: "小明", age: "18", say: function, constructor: function}
    console.log(Object.getPrototypeOf(s1) === Student.prototype)  // true
    // hasOwnProperty方法可以判断属性是否是实例中的属性
    console.log(s1.hasOwnProperty('name'))  // true
    console.log(s2.hasOwnProperty('name'))  // false
    //返回可枚举的属性
    console.log(Object.keys(s1))  // ["name"]
    console.log(Object.keys(Student.prototype)) // ["name", "age", "say"]
    
    • 构造函数和原型模式的组合
    /**
     * 构造函数模式和原型模式的组合(构造函数中定义属性,原型模式中定义方法和公用的属性,工作中常用的模式)
     * @param name
     * @param author
     * @constructor
     */
    function Book(name, author, msg) {
      this.name = name;
      this.author = author;
      this.msg = msg;
    }
    Book.prototype = {
      say: function () {
        console.log(this.msg)
      }
    }
    var b1 = new Book('悟空传', '今何在', '生我何用?不能欢笑。灭我何用?不减狂骄。')
    var b2 = new Book('剑来', '烽火戏诸侯', '走在泥瓶巷里的少年,好像想起了谁,一下子就泪流满面了。')
    console.log(b1.say(), b2.say()) // 生我何用?不能欢笑。灭我何用?不减狂骄。 走在泥瓶巷里的少年,好像想起了谁,一下子就泪流满面了。
    console.log(b1.say === b2.say)  // true(公用原型中的方法)
    

    引用

    javascript 高级程序设计第三版

    相关文章

      网友评论

        本文标题:第六章(2):创建对象

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