TOP

JavaScript | 创建对象的9种方法详解(一)
2017-10-10 12:59:35 】 浏览:10200
Tags:JavaScript 创建 对象 方法 详解

—————————————————————————————————————————————————————————

创建对象

标准对象模式

"use strict";
// *****************************************************************
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){alert(this.name);};

 

字面量形式

"use strict";
// *****************************************************************
var person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function(){alert(this.name);}
};

 

工厂模式

  • 抽离了创建具体对象的过程,使用函数来封装以特定接口创建对象的细节
  • 优点:可以反复创建相似的对象
  • 缺点:无法进行对象识别

    <<script.js>>

"use strict";
// 工厂模式
function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o;
}
var person1 = createPerson("name1", 1, "hehe");
console.log(person1);

 

构造函数模式

  • 优点:

    可以解决工厂作用的无法对象识别问题

    没有显示地创建对象,直接将属性和方法赋给了this对象,没有return语句

  • 缺点:

    在案例中,每个Person对象都包含一个不同的Function实例的本质,以这种方式创建函数,会导致不同的作用域链和标识符解析,但创建Function新实例的机制仍是相同的。而如果将方法放到全局作用域中,自定义的引用类型就没有封装性可言

  • 通过new关键字来创建自定义的构造函数
  • 创建自定义的构造函数意味着将来可以将它的实例标识为一种特性的类型
  • 以该方法定义的构造函数是定义在Global对象中的
  • 调用构造函数实际操作步骤:
    • 创建一个新对象
    • 将构造函数的作用域赋给新对象(this指向该对象)
    • 执行构造函数中的代码(为新对象添加属性)
    • 返回新对象
"use strict";
// 构造函数模式
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        console.log(this.name);
    }
}
var person1 = new Person("name2", 2, "hehe");
console.log(person1);
// 检测对象类型
console.log(person1.constructor == Object); // false
console.log(person1.constructor == Person); // true
console.log(person1 instanceof Object); // true
console.log(person1 instanceof Person); // true
// 当作构造函数使用
var person2 = new Person("name3", 3, "hehe");
person2.sayName();
// 作为普通函数调用
// Person("name4", 4, "hehe"); // 添加到window,严格模式下无法访问
// window.sayName(); // name4
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "name5", 5, "111"); // 在对象o中调用
o.sayName(); // o就拥有了所有属性和sayName()方法
// 创建两个完成同样任务的Function实例是没必要的,有this对象在,不需要在执行代码前就把函数绑定到特定对象上面
console.log(person1.sayName == person2.sayName); // false,但方法是相同的
// 通过把函数定义转移到构造函数外来解决
function Person2(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName2;
}
function sayName2() { // 在这种情况下person1和person2共享同一个全局函数
    console.log(this.name);
}
var person1 = new Person2("name6", 6, "hehe");
var person2 = new Person2("name7", 7, "hehe");
console.log(person1.sayName == person2.sayName); // true

 

原型模式

  • 优点:

    可以解决构造函数模式创建多个方法实例的问题

    可以让所有对象实例共享原型所包含的属性和方法,不必在构造函数中定义对象实例的信息,而可以直接将信息添加到原型对象中

  • 缺点:

    原型中的所有属性是被很多实例共享的,对于包含引用类型值(数组等)的属性来说是(大问题)

    省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值,需要各自单独传入参数(这应该不是问题吧)

    所以很少有人单独使用原型模式,见下面的综合使用

  • 我们创建的每一个函数都有一个prototype(原型)属性,是一个指向对象的指针。
  • 关于原型的理解:

    任何时候创建一个新的函数,都会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。

    默认情况下,所有原型对象都会获得一个constructor(构造函数)属性,包含一个指向prototype属性的指针

    在实例中,Person.prototype.constructor Person,通过构造函数可以继续为原型对
    JavaScript | 创建对象的9种方法详解(一) https://www.cppentry.com/bencandy.php?fid=97&id=131992

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