在JavaScript中自定义对象

最新推荐文章于 2023-07-19 11:49:00 发布

青灯明月

最新推荐文章于 2023-07-19 11:49:00 发布

阅读量1.2k

点赞数

分类专栏：设计模式 JavaScript 文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/u014255299/article/details/52040029

版权

设计模式同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

创建对象的方法
继承

创建对象的方法

早期方式

var person = new Object();
person.name = "Nicholas";
person.age = 20;
person.job = "software Engineer";

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

上面的例子创建了一个名为person的对象，并为其添加了三个属性和一个方法

对象字面量方式

var person = {
    name:"Nicholas",
    age: 29,
    job: "Software Engineer",

   sayName: function(){
        alert(this.name);
    }
};

工厂模式

虽然Object构造函数或对象字面量都可以用来创建单个对象，但其缺点就在于：使用同一个接口创建很多对象会导致大量重复代码的产生。为解决这个问题，人们开始使用工厂模式的一种变体。

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return 0;
}

var person1 = createPerson("Nicholas",29,"Software Engineer");
var person2 = createPerson("Greg",27,"Doctor");

函数creatPerson()能根据接受的参数来创建一个包含所有必要信息的Person对象。这个函数可以被无数次地调用，每次都会返回一个包含三个属性一个方法的对象。
请注意，虽然工厂模式解决了创建多个相似对象的问题，但不能识别出对象的类型，这时需要一个新模式。

构造函数模式

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

var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");

在这个例子中，Person()函数和createPerson()函数的不同之处在于：
* 没有显式地创建对象
* 直接将属性和方法赋给了this对象
* 没有return语句
* 函数名Person的开头是大写P，按照惯例，构造函数始终都应以一个大写字母开头，而非构造函数则是以一个小写字母开头。

要创建Person的新实例，必须使用new操作符，以这种方式调用构造函数实际上会经历一下四个步骤：
1.创建一个新对象；
2.将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
3.执行构造函数中的代码（为这个新对象添加属性）
4.返回新对象。

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

var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");

优点：能用instanceof识别对象类型
缺点：每个方法都要在实例上重新创建一遍。

原型模式

我们创建的每个函数都有一个protype(原型)属性，这个属性是一个指向一个对象的指针，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是将这些信息直接添加到原型当中。

function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
);

var person1 = new Person();
person1.sayName();  //"Nicholas"

var person2 = new Person();
person2.sayName();   //"Nicholas"

alert(person1.sayName == person2.sayName);  //true

1.理解原型对象
无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个consructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。例如Person.prototype.constructor指向Person。而通过这个构造函数，我们还可以继续为原型对象添加其他属性和方法。
创建自定义构造函数之后，其原型对象默认只会取得constructor属性，其他方法则是从Object继承而来。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针[[Prototype]]（内部属性），指向构造函数的原型对象。
这里写图片描述
上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。再次，Person.prototype指向了原型对象，而Person.prototype.constructor又指回了Person。原型对象中出了包含constructor属性之外，还包括后来添加的其他属性。Person的每个实例——person1和person2都包含一个内部属性[[Prototype]]，仅仅指向了Person.prototype。换句话说，它们和构造函数没有直接的关系。此外需要注意，虽然这两个实例都不包含属性和方法，但我们可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到[[Prototype]]，但可以通过isPrototypeOf()方法确定对象之间是否存在这种关系。从本质上讲，如果[[Prototype]]指向调用isPrototypeOf()方法的对象（Person.prototype），那么这个方法就返回true,如下所示：

alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2));  //true

ES5增加了一个新方法：Object.getPrototypeOf()，这个方法返回[[Prototype]]的值。例如：

alert(Object.getPrototypeOf(person1) == Person.prototype; //true
alert(Object.getPrototypeOf(person2).name); //"Nicholas"

第一行代码只是确定Object.getPrototypeOf()返回的对象实际是这个对象的原型。
第二行代码取得了原型对象中name属性的值。
每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。
虽然可以通过对象实例访问保存在原型中的值，但不能通过对象实例重写原型中的值。如果我们在实例中添加一个与实例原型重复名称的属性，那么实例中的该属性会屏蔽原型中的属性。换句话说，添加这个属性只会阻止我们访问到原型中的那个属性，但不会修改它。即使将其设为null也仅仅在实例中起作用。使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。
使用hasOwnProperty()方法可以检测一个属性存在于实例中还是存在于原型中，这个方法只在给定属性存在于对象实例中时，才会返回true。

2.原型与in操作符
in操作符有两种使用方式：单独使用；在for-in循环中使用。
单独使用时，in操作符会在通过对象能访问指定属性时返回true，无论该属性存在于实例中还是原型中
alert(“name” in person1)); //true or false
由于in操作符只要通过对象能够访问到属性就返回true，而hasOwnProperty()只在属性存在于实例中时才返回true。因此，如果返回的是true false则可以确定属性是原型中的属性。
3.更简单的原型语法

function Person(){
}

Person.prototype = {
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName :function(){
        alert(this.name);
    }
};

在上例中，我们将Person.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果相同，但有一个例外:constructor属性不再指向Person了。
……

原型对象的缺点：
1.省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。
2.原型中所有属性是被很多实例共享的，这种共享适用于函数，但对于包含引用类型值的属性就很成问题

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

最常见的方法，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存，同事这种模式还支持向构造函数传递参数，可谓是集两种模式之长。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby","Count"];
}

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

var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person ("Greg:,27,"Doctor");

person1.friends.push("Van:);
alert(person1.friends);   //"Shelby,Count,Van"
alert(person2.friends);   //"Shelby,Count"
alert(person1.friends === person2.friends);   //false
alert(person1.sayName === person2.sayName); //true

动态原型模式

和其他OO语言相似。它吧所有信息都封装在了构造函数中，而通过在构造函数中初始化原型（仅在必要的情况下），又同时保持了同时使用构造函数和原型的优点，换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。

function Person(name,age,job){
    //属性
    this.name = name;
    this.age = age;
    this.job = job;
    //方法
    if(typeof this.sayName != "function"){

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

var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

对于采用这种模式创建的对象，还可以使用instanceof操作符确定它的类型
使用动态原型模式时，不能使用对象字面量重写原型，否则会切断现有实例和新原型之间的联系。

寄生构造函数模式

在前几种模式都不适用的情况下可以使用。思想是创建一个函数，该函数的作用仅仅是f封装创建对象的代码，然后再返回新创建的对象，但从表面上看，这个函数又很想是典型的构造函数。

function Person(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}

var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();  //"Nicholas"

在这个例子中，Person函数创建了一个新对象，并以响应的属性和方法初始化该对象，然后又返回了这个对象。除了使用new操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。构造函数在不返回值得情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。
说明：首先，返回的对象与构造函数或者构造函数的原型属性之间没有关系，也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么区别，因此不能使用instanceof操作符确定对象类型。因此这种模式不推荐优先使用。

稳妥构造函数模式

稳妥对象（durable objects）：没有公共属性，其方法也不引用this的对象。适合在一些安全的环境中，或放置数据被其他应用程序改动时使用。稳妥构造函数遵循与计生构造函数类似的模式，但有两点不同：
1.新创建对象的实例方法不引用this;
2.不适用new操作符调用构造函数。

function Person(name, age, job){

    //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数

    //添加方法
    o.sayName = function(){
        alert(name);
    };

    //返回对象
    return o;
}

注意，用这种模式创建的对象中，除了使用sayName()方法之外，没有其他办法访问name的值。可以像下面使用稳妥的Person构造函数
var friend = Person(“Nicholas”,29,”Software Engineer”);
friends.sayName(); //”Nicholas“
除了调用sayName()方法外，没有别的方式可以访问其数据成员。当然，instanceof操作符对这种对象也没有什么意义。

继承

许多OO语言都支持两种继承方式：接口继承和实现继承。
接口继承只继承方法签名，实现继承则继承实际的方法。
由于在ECMAScript中函数没有签名，因此无法实现接口继承，只支持实现继承。实现继承主要是依靠原型链实现的

原型链

基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
＞构造函数、原型和实例的关系：
每个构造函数都有一个原型对象
每个原型对象都包含一个指向构造函数的指针
每个实例都包含一个指向原型对象的内部指针。

现在让原型对象等于另一个类型的实例，那么，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。如此层层递进，就构成了实例和原型的链条。
实现原型链的基本模式：

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
   return this.property;
};

function SubType(){
    this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
}

SubType.prototype.getSubValue = function(){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());  //true

SubType继承了SuperType，而继承是通过创建SuperType的实例，并将该实例赋给SubType.prototype实现的。实现的本质是重写原型独享，代之以一个新类型的实例。
也就是说，原来存在于SuperTyper实例中的所有属性和方法，现在也存在于SubType.prototype中了。
关系如下图所示：
这里写图片描述

最终结果：instance指向SubType的原型，SubType的原型又指向SuperType的原型，getSuperValue()方法仍在SuperType.prototype总，但property则位于SubType.prototype总。这是因为property是一个实例属性，而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例，那么property当然就位于该实例中了。此外，instance.constructor现在指向的是SuperType，这是因为SubType的原型指向了SuperType的原型，而这个原型对象的constructor属性指向的是SuperType。
谨慎地定义方法
子类型有时候需要重写父类中的某个方法，或者需要添加父类中不存在的某个方法，但无论如何，给原型添加方法的代码一定要放在替换原型的语句之后：

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
   return this.property;
};

function SubType(){
    this.subproperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();

//添加新方法
SubType.prototype.getSubValue = function(){
    return this.subproperty;
};

//重写父类中的方法
SubType.prototype.getSuperValue = function(){
    return false;
};

var instance = new SubType();
alert(instance.getSuperValue());  //false

注意！
在通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样做会重写原型链。

原型链的问题：
１.由于包含引用类型值得原型属性会被所有实例共享，这也是为什么要在构造函数而不是原型对象中定义属性的原因。在通过原型实现继承时，原型实际上会变成另一个类型的实例，于是原先的实例属性也就变成了现在的原型属性了。
２.在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上是没有办法在不影响所有对象实例的情况下，给父类的构造函数传递参数。
由于这些问题，实践中很少胡单独使用原型链。

借用构造函数（constructor stealing）/伪造对象/经典继承

基本思想：在子类型构造函数的内部调用父类型构造函数。

function SuperType(){
    this.colors = ["red","blue","green"];
}

function SubType(){
    //继承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors);  //"read,blue,green"

在SubType的构造函数中使用call()方法（apply()也可以）借调了父类的构造函数，实际上实在（未来将要）新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例就会有自己的colors属性的副本。
优点：传递参数
相对于原型链，借用构造函数可以在子类型构造函数中向父类型构造函数传递参数：

function SuperType(name){
    this.name = name;
}

function SubType(){
    //继承了SuperType，同时还传递了参数
    SuperType.call(this,"Nicholas");

    //实例属性
    this.age = 29;
}

var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age);  //29

以上代码中的SuperType只接受一个参数name，该参数会直接赋给一个属性。在SubType构造函数内部调用SuperType构造函数时，实际是为SubType的实例设置了name属性。为了确保SuperType构造属性不会重写子类型的属性，可以在调用父类型构造函数后，再添加应该在子类型中定义的属性。

缺点：
方法都在构造函数中定义，无法服用函数。

组合继承（combination inheritance）/伪经典继承（最常用）

思想：使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承。将原型链和借用构造函数的技术组合到一块，取其精华的一种集成模式。

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}

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

function SubType(name,age){

    //继承属性
    SuperType.call(this,name);

    this.age = age;
}

//继承方法
SubType.protype = new SuperType();

SubType.prototype.sayAge = function(){
   alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"
instance1.sayName();   //”Nicholas“
instance1.sayAge();   //29

var instance2 = new SubType("Greg",27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();  //"Greg";
instance2.sayAge();  //27

原型式继承

思想：没有使用严格意义上的构造函数，而是借助原型可以给予已有的对象创建新对象，同时还不必因此创建自定义类型。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

在object()函数内部，先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。从本质上讲，object()对传入其中的对象执行了一次浅复制。

var person = {
    name: "Nicholas"
    friends:["Shelby","Court","Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson =object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);  //"Shelby,Court,Van,Rob,Barbie"

这种原型式继承，要求你必须有个对象可以作为另一个对象的基础。如果有这样的对象，可以把它传递给object()函数，然后再根据具体需求对得到的对象再加以修改。在上例中，person对象可作为另一个对象基础，于是我们将它传入到object()函数中，然后该函数就返回一个新对象，这个新对象将person作为原型，所以它的原型中就包含一个基本类型值属性和一个引用类型值属性。这意味着person.friends不仅属于person所有，也会被anotherPerson以及yetAnotherPerson共享。实际上这相当于又创建了person对象的两个副本。
ES5通过新增Object.create()方法规范化了原型式继承。这个方法接受两个参数：一个用作新对象原型的对象，和一个微信对象定义额外属性的对象（可以没有）。在传入一个参数的情况下，Object.create()与object()方法的行为相同。

var person = {
    name: "Nicholas",
    friends:["Shelby","Court","Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Barbie");

alert(person.friends);  //"Shelby,Court,Van,Rob,Barbie"

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式制定的任何属性都会覆盖原型对象上的同名属性。例如：

var person = {
    name:"Nicholas"
    friends:["Shelby","Court","Van"]
};

var anotherPerson = Object.create(person,{
    name:{
        value:"Greg"
    }

});

alert(anotherPerson.name); //“Greg”

如果只想让一个对象和另一个对象保持类似的情况下，原型式继承时完全可以胜任的。不过，如果包含引用类型值得属性始终都会共享响应的值，就像使用原型模式一样。

寄生式继承（parasitic）

与原型式继承紧密相关，思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像是真的是它做了所有工作一样返回对象。以下代码示范了寄生式继承模式：

function createAnother(original){
    var clone = object(original);  //通过调用函数创建一个新对象
    clone.sayHi = function(){    //以某种方式来增强这个对象
        alert("hi");
   };
    return clone;   //返回这个对象
}
在上例中，createAnother()函数接受了一个参数，也就是将要作为新对象基础的对象。然后，把这个对象(original)传递给object()函数，将返回的结果赋值给clone，再为clone对象添加一个新方法sayHi()，最后返回clone对象，可以像下面这样来使用createAnother()函数：
```javascript
var person = {
    name:"Nicholas",
    friends:["Shelby","Court","Van"]
};

var person = {
    name: ["Shelby","Court","Van"]
};

var anotherPerson = createAnother(person);
);

var anotherPerson = createAnother(person);
anotherPerson.sayHi();  //"hi"




<div class="se-preview-section-delimiter"></div>

上例给予person返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法，而且还有自己的sayHi()方法。
任何能够返回新对象的函数都适用于此模式。但是，使用寄生式继承来为对象添加函数，会由于不能做到函数服用而降低效率，这一点与构造函数模式类似。

寄生组合式继承

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，基本思路是：不必为了制定子类型的原型而调用父类型的构造函数，我们需要的无非是父类型原型的一个副本。本质上就是使用寄生式继承来继承父类型的原型，然后再将结果制定给子类型的原型。基本模式如下：

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);   //创建对象
    prototype.constructor = subType;   //增强对象
    subType.prototype = prototype;   //指定对象
}




<div class="se-preview-section-delimiter"></div>

inheritPrototype()函数实现了计生组合式继承的最简单形式。这个函数接受两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建父类型原型的副本。第二步是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inheritPrototype()函数的语句，去替换前面例子中为子类型原型赋值的语句了，例如：

function SuperType(name){
    this.name= name;
    this.colors = ["red","blue","green"];
}

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

function SubType(name,age){
    SuperType.call(this,name);

    this.age = age;
}

inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
}

这个例子高效率在它只调用了一次SuperType构造函数，并且避免了在SubType.prototype上面创建不必要的、多余的属性。同时原型链还能保持不变，因此还能正常使用instanceof和isPrototypeOf()，开发人员普遍认为寄生组合式是引用类型最理想的继承凡事。

inheritPrototype()函数实现了计生组合式继承的最简单形式。这个函数接受两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建父类型原型的副本。第二步是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inheritPrototype()函数的语句，去替换前面例子中为子类型原型赋值的语句了，例如：
```javascript
function SuperType(name){
    this.name= name;
    this.colors = ["red","blue","green"];
}

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

function SubType(name,age){
    SuperType.call(this,name);

    this.age = age;
}

inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
}

这里写图片描述
这个例子高效率在它只调用了一次SuperType构造函数，并且避免了在SubType.prototype上面创建不必要的、多余的属性。同时原型链还能保持不变，因此还能正常使用instanceof和isPrototypeOf()，开发人员普遍认为寄生组合式是引用类型最理想的继承范式。

青灯明月

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在JavaScript中自定义对象

创建对象的方法早期方式对象字面量方式工厂模式构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数模式继承原型链借用构造函数constructor stealing伪造对象经典继承组合继承combination inheritance伪经典继承最常用原型式继承寄生式继承parasitic寄生组合式继承创建对象的方法早期方式var p
复制链接

扫一扫