设为首页 加入收藏

TOP

JavaScript | 创建对象的9种方法详解(三)
2017-10-10 12:59:35 】 浏览:10210
Tags:JavaScript 创建 对象 方法 详解
e(); // error
// per2.sayName(); // Per_name // ***************************************************************** // 问题 // 对一个实例的数组进行操作时,其他所有实例都会跟随变化 function Per2() {}; Per2.prototype = { constructor:Per2, id: 0, name: "Per_name", arr : [1,2] } var per3 = new Per2(); var per4 = new Per2(); console.log(per3.arr); // [1, 2] console.log(per4.arr); // [1, 2] per3.arr.push("aaa"); console.log(per3.arr); // [1, 2, "aaa"] console.log(per4.arr); // [1, 2, "aaa"] console.log(per3.arr === per4.arr); // true

 

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

  • 是最常见的方式,构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性。
  • 优点:

    每个实例都有自己的一份实例属性的副本, 同时又共享着对方法的引用,最大限度节省内存。

    支持向构造函数传递参数

    <<script.js>>

"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {
    this.id = id;
    this.name = name;
    this.friends = [1, 2, '3'];
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}
var person1 = new Person(1,"p1_name");
var person2 = new Person(2,"p2_name");
person1.friends.push("4");
console.log(person1.friends); // 1,2,3,4 不会相互影响
console.log(person2.friends); // 1,2,3
console.log(person1.friends === person2.friends); // false
console.log(person1.sayName === person2.sayName); // true 共用一个代码块

 

动态原型模式

  • 将所有信息都封装在构造函数中,通过在构造函数中初始化原型(必要情况下)由保持了同时使用构造函数和原型的优点
  • 优点:

    可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型

  • p.s.

    在该模式下不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,会切断现有实例和新原型之间的联系。

    <<script.js>>

"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {
    this.id = id;
    this.name = name;
    this.friends = [1, 2, '3'];
    // 只有在sayName()方法不存在的情况下,才会将它添加到原型中
    // if这段代码只会在初次调用构造函数时才会执行
    // 这里对原型所做的修改,能够立即在所有实例中得到反映
    if (typeof this.sayName != "function") {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }
}
var person1 = new Person(1,"hugh");
person1.sayName();

 

寄生构造函数模式

  • 在前几种模式不适用的情况下,可以使用寄生(parasitic)构造函数模式
  • 创建一个函数,仅封装创建对象的代码,然后返回新创建的对象
  • 和工厂模式的区别:使用new操作,并把使用的包装函数叫做构造函数
  • 使用场景:假设我们想创建一个具有额外方法的特殊数组,由于不能直接修改Array构造函数,就可以使用这个模式(见代码)
  • p.s.

    返回的对象与构造函数或与构造函数的原型属性之间没有关系,也就是说,构造函数返回的对象与在构造函数外部创建的对象没有不同

    不能依赖instanceof操作符来确定对象类型

    如果可以使用其他模式的情况下,不要使用这种模式

    <<script.js>>

"use strict";
// *****************************************************************
function Person(id, name) {
    var o = new Object();
    o.id = id;
    o.name = name;
    o.sayName = function() {
        console.log(this.name);
    }
    return o; // 返回新创建的对象
}
var person1 = new Person(1, "111");
person1.sayName();

// 模拟使用场景
function SpecialArray() {
    var values = new Array(); // 创建数组
    values.push.apply(values, arguments); // 添加值
    values.toPipedString = function() {
        return this.join("|");
    };
    return values;
}
var colors = new SpecialArray("red","blue","green");
console.log(colors);
console.log(colors.toPipedString());

 

稳妥构造函数模式

  • 所谓稳妥对象,指的是没有公共属性而且其方法也不引用this的对象
  • 使用场景:

    安全的环境中(这些环境会禁止使用thisnew

    防止数据被其他应用程序(如Mashup程序)改动时使用

  • 与寄生构造函数模式的区别:

    新建对象时不引用this

    不适用new操作符构造函数

  • 与寄生构造函数模式类似,该模式
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JavaScript | 创建对象的9种方法.. 下一篇海量数据系统之道

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目