JavaScript中关于创建对象的笔记

Posted 2020-07-20

1，最基本的两种创建对象的方式：构造函数|| 字面量

构造函数：

var person = new Object();
person.name = "chen1zee1";
person.age = 18;

字面量：

 var person = { name: "chen1zee1", age: 18, }

 

• 缺点：使用，构造函数和字面量创建很多对象时，会产生大量重复的代码。为解决此问题，人们开始使用工厂模式

 

2，工厂模式

工厂模式抽象了创建具体对象的过程，并封装成函数，这样只要执行对应函数即能创建对象。但由于ECMAScript中无法创建类，开发者发明了一种函数，用来封装以特定接口创对象的细节。例：

function createPerson (name){
    var o = new Object();
    o.name = name;
    return o;
}
var person = createPerson("chen1zee1");

3，构造函数模式

ECMAScript 中，构造函数能用来创建特定类型的对象，也同样可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。例：

function Person(name){
    this.name = name;
}
var person = new Person("chen1zee1");

• 构造函数与工厂模式的区别：1，没有显式创建对象，2直接将属性和方法赋给this对象，3无需return。
• 此外，按照惯例：自定义构造函数应以一个大字字母开头，以区别其他函数。
• 同时注意，通过构造函数创建一个对象，必须使用new 操作符。

构造函数存在的问题：使用构造函数时，每个方法都要在每个实例中创建一遍。例如：

function Person(name){
    this.name = name;
    this.sayName = function(){
        alert(this.name);
    }
}

每当条用此构造函数时，都会创建一个方法sayName，而事实上，我们并不需要特意给每个对象均设置一个sayName方法，因为不同实例其sayName功能是一样的。

 

4，原型模式

• 为解决构造函数创建实例时，重复创建不必要的方法。我们利用到了函数的prototype（原型）属性。
• 我们创建的每一个函数都有一个prototype(原型)属性，它是一个指针，指向函数的原型对象。而此原型对象包含着该构造函数的所有属性和方法，并供构造函数所创建的对象所共用。

举个例子：原型对象就像是一个菜谱，而构造函数就是做菜这个行为，而实例就是我们通过看菜谱，做出来的菜式。

菜谱（原型对象）里包含了所有做菜（构造函数）所需的材料（实例属性），方法，如（煎炒闷煮）等，而我们通过菜谱所做出来的菜式里面的一切材料，做得方法（煎炒闷煮），都能在菜谱中找出来。

这样说吧，原型对象是一个干细胞，而实例就是该干细胞分裂出来的子细胞，所含的东西是一样的。当然，子细胞会发生基因的突变（实例改变自身的属性和方法，则会表现自身的属性与方法，当无定义时再在原型中克隆。也可以理解为，实例有的就是实例的，实例没有的就找父辈那里找），表现出于干细胞（原型）不同的一面。

• 使用原型的好处，是可以让所有对象实例共享它所包含的属性和方法。也就是说，我们不必在构造函数中定义对象实例的信息，（也就是一些同功能的函数，例如上边的sayName()，可以不定义，让后让实例从原型那里找到，并调用），而是可以将这些信息添加到原型，供所有的实例使用。从而优化了运行。

例：

function Person (name){
    Person.prototype.name = name;
    Person.prototype.sayName = function(){
        alert(this.name);
    };
}

 

 

5,理解原型对象

只要我们创建了函数，就会根据一组特定规则为该对象创建创建一个prototype属性。这个属性指向函数的原型对象 Fn Prototype。

而原型对象会自动获得一个constructor属性，指向构造函数本身。

创建了自定义的构造函数自后，其原型对象默认只会取得constructor属性，而其他方法是从Object继承而来的。

当调用构造函数创建一个新实例后，该实例的内部将包含一个指针__prototype__(有兼容性问题)，指向构造函数的原型对象。

下图以 Person 为例，展示构造函数，原型对象，实例之间的关系：

当然，因为这几个相关的属性(prototype)本质都为指针，可修改其指向达到一定的目的。

 

• 原型模式的缺点：原型中所有属性是被很多实例共享的。而当原型中有引用类型值的属性时，例如：数组[]
• 则会使得所有实例拥有同一个引用对象，大多数情况下我们肯定是不希望如此的。例如：

function Person (name){
    Person.prototype.name = name;
    Person.prototype.friends = ["dorlin","lily"];
}
var person1 = new Person("chen1zee1");
person1.friends.push("jack");
var person2 = new Person("jack");
person2.friends.push("chen1zee1");

上式的结果为，person1和person2的friends 都为["dorlin","lily","jack","chen1zee1"]。

 

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

我们可以取两者的优点，构造函数定义实例的属性，让它具有自己的特性，而原型模式定义方法还有共享的特性。譬如sayName()函数,还有诸如person 都在class_1 时，， 可以定义Person.prototype.class = "class_1";例：

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){alert(this.name)};
Person.prototype.class = "class_1";

 

• 这种构造函数与原型混用的方式，是目前ECMAScript中使用最广泛，认同最高的一种创建自定义类型的方法。可以说这是用来定义引用类型的一种默认模式。