javascript中类的定义及其方式,创建对象的

浅谈 JS 创制对象的 8 种格局

2015/10/16 · JavaScript
· 对象

原来的书文出处: Tomson   

  • Objct 模式
  • 工厂方式
  • 构造器格局
  • 经过 Function 对象完毕
  • prototype 模式
  • 构造器与原型格局的名不副实形式
  • 动态原型格局
  • 掺杂工厂方式

至于javascript中类的持续能够参见阮大器晚成峰的Blog《Javascript承继机制的宏图观念》,说的很透。

1.Object 模式

JavaScript

var o1 = {};//字面量的表现方式 var o2 = new Object; var o3 = new
Object(); var o4 = new Object(null); var o5 = new Object(undefined); var
o6 = Object.create(Object.prototype);//等价于 var o = {};//即以
Object.prototype 对象为二个原型模板,新建一个以这些原型模板为原型的对象
//区别 var o7 = Object.create(null);//创造叁个原型为 null 的指标

1
2
3
4
5
6
7
8
var o1 = {};//字面量的表现形式
var o2 = new Object;
var o3 = new Object();
var o4 = new Object(null);
var o5 = new Object(undefined);
var o6 = Object.create(Object.prototype);//等价于 var o = {};//即以 Object.prototype 对象为一个原型模板,新建一个以这个原型模板为原型的对象
//区别
var o7 = Object.create(null);//创建一个原型为 null 的对象

在 chrome 里查看种种新建对象的区分:
图片 1

能够见见前6种形式创制出来的目的都以同后生可畏的,第各个不一样点在于其即使也为
Object
对象但其无其余性质(富含未有其余能够继续的性质,因为创建的时候从不点名其原型)

意气风发、在javascript中实例化碰到的主题素材:

2.厂子格局

JavaScript

//工厂方法1 由此贰个措施来创建对象 利用 arguments
对象获得参数设置属性(参数不直观,轻易并发难点) function createCar(){ var
oTemp = new Object(); oTemp.name =
arguments[0];//直接给目的增多属性,各样对象都有直接的属性 oTemp.age =
arguments[1]; oTemp.showName = function () { alert(this.name);
};//每一个对象都有三个 showName 方法版本 return oTemp; }
createCar(“tom”).showName();//在 JS 中未有传递的实参,实际形参值为
undefined(这里的 age 为 undefined) createCar(“tim”,80).showName();
alert(createCar(“tom”) instanceof Object);//true 推断目的是或不是 Object
类或子类

1
2
3
4
5
6
7
8
9
10
11
12
13
//工厂方法1 通过一个方法来创建对象 利用 arguments 对象获取参数设置属性(参数不直观,容易出现问题)
function createCar(){
    var oTemp = new Object();
    oTemp.name = arguments[0];//直接给对象添加属性,每个对象都有直接的属性
    oTemp.age = arguments[1];
    oTemp.showName = function () {
        alert(this.name);
    };//每个对象都有一个 showName 方法版本
    return oTemp;
}
createCar("tom").showName();//在 JS 中没有传递的实参,实际形参值为 undefined(这里的 age 为 undefined)
createCar("tim",80).showName();
alert(createCar("tom") instanceof Object);//true 判断对象是否 Object 类或子类

JavaScript

//工厂方法2 透过传参设置属性(参数直观明了) function createCar(name,age){
var oTemp = new Object(); oTemp.name =
name;//直接给目的加多属性,各种对象都有直接的习性 oTemp.age = age;
oTemp.showName = function () { alert(this.name); };//各样对象都有一个showName 方法版本 return oTemp; } createCar(“tom”).showName();
createCar(“tim”,80).showName(); alert(createCar(“tom”) instanceof
Object);//true 决断目的是或不是 Object 类或子类

1
2
3
4
5
6
7
8
9
10
11
12
13
//工厂方法2 通过传参设置属性(参数直观明了)
function createCar(name,age){
    var oTemp = new Object();
    oTemp.name = name;//直接给对象添加属性,每个对象都有直接的属性
    oTemp.age = age;
    oTemp.showName = function () {
        alert(this.name);
    };//每个对象都有一个 showName 方法版本
    return oTemp;
}
createCar("tom").showName();
createCar("tim",80).showName();
alert(createCar("tom") instanceof Object);//true 判断对象是否 Object 类或子类

上边用《javascript高档程序设计》中的例子来做表达,假若现在定义了多个car的对象,它是Object类的实例。像下边那样的:

3.构造器情势

JavaScript

//构造器方法1 function Car(sColor,iDoors){
//注解为布局器时须要将函数名首字母大写 this.color = sColor;
//构造器内直接申明属性 this.doors = iDoors; this.showColor = function(){
return this.color; };//各个 Car 对象都有和好的 showColor方法版本
this.showDoor = function () { return this.doors; } }

1
2
3
4
5
6
7
8
9
10
11
//构造器方法1
function Car(sColor,iDoors){  //声明为构造器时需要将函数名首字母大写
    this.color = sColor;      //构造器内直接声明属性
    this.doors = iDoors;
    this.showColor = function(){
        return this.color;
    };//每个 Car 对象都有自己的 showColor方法版本
    this.showDoor = function () {
        return this.doors;
    }
}

行使情势1的难点很鲜明,不能够是 showDoor
方法重用,每一回新建一个指标将在在堆里新开发意气风发篇空间.更正如下

JavaScript

//构造器方法2 function showDoor(){ //定义一个大局的 Function 对象 return
this.doors; } function Car(sColor,iDoors){//构造器 this.color = sColor;
//构造器内一直注明属性 this.doors = iDoors; this.showColor = function(){
return this.color; }; this.showDoor = showDoor();//每一种 Car
对象分享同贰个 showDoor 方法版本(方法有投机的成效域,不用操心变量被分享)
} alert(new
Car(“red”,2).showColor());//通过构造器创立二个对象并调用其指标方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//构造器方法2
function showDoor(){      //定义一个全局的 Function 对象
    return this.doors;
}
 
function Car(sColor,iDoors){//构造器
    this.color = sColor;      //构造器内直接声明属性
    this.doors = iDoors;
    this.showColor = function(){
        return this.color;
    };
    this.showDoor = showDoor();//每个 Car 对象共享同一个 showDoor 方法版本(方法有自己的作用域,不用担心变量被共享)
}
 
alert(new Car("red",2).showColor());//通过构造器创建一个对象并调用其对象方法

上边出现的主题素材正是语义相当不够解除,展示不出类的封装性,改善为 prototype 格局

复制代码 代码如下:

4.透过Function对象完毕创建对象

大家领略每声美素佳儿个函数实际是开创了叁个Function 实例 JS
函数.

JavaScript

function function_name(param1,param2){alert(param1);} //等价于 var
function_name = new Function(“param1″,”pram2″,”alert(param1);”);

1
2
3
function function_name(param1,param2){alert(param1);}
//等价于
var function_name = new Function("param1","pram2","alert(param1);");

JavaScript

var Car2 = new Function(“sColor”,”iDoors”, “this.color = sColor;”+
“this.doors = iDoors;”+ “this.showColor = function(){ return this.color;
}” ); alert(new Car2(“blue”,3).showColor());

1
2
3
4
5
6
var Car2 = new Function("sColor","iDoors",
         "this.color = sColor;"+
         "this.doors = iDoors;"+
         "this.showColor = function(){ return this.color; }"
);
alert(new Car2("blue",3).showColor());

var oCar=new Object();
oCar.color = “red”;
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function () {
alert(this.color);
};

5.prototype模式

  • 类经过 prototype 属性增加的习性与办法都以绑定在此个类的 prototype
    域(实际为多少个 Prototype
    对象)中,绑定到这几个域中的属性与艺术唯有叁个版本,只会创立二遍.
  • 类的实例对象足以一向像调用自身的质量相仿调用该类的 prototype
    域中的属性与方法,类能够因而调用 prototype 属性来直接调用prototype
    域内的习性与方法.

注意:通过类实例化出目的后对象内无 prototype
属性,但目的可一向像访谈属性相像的访问类的 prototype
域的内容,实例对象有个民用属性__proto__,__proto__属性内含有类的
prototype 域内的习性与措施

JavaScript

措施1 function Car3(){}//用空构造函数设置类名 Car3.prototype.color =
“blue”;//每一个对象都分享雷同属性 Car3.prototype.doors = 3;
Car3.prototype.drivers = new Array(“迈克”,”John”);
Car3.prototype.showColor = function(){ alert(this.color);
};//各个对象分享一个办法版本,外省部存款和储蓄器。 var car3_1 = new Car3(); var
car3_2 = new Car3(); alert(car3_1.color);//blue
alert(car3_2.color);//blue alert(Car3.prototype.color);//blue
car3_1.drivers.push(“Bill”);
alert(car3_1.drivers);//”Mike”,”John”,”Bill”
alert(car3_2.drivers);//”迈克”,”John”,”Bill”
alert(Car3.prototype.drivers);//”迈克”,”约翰”,”Bill”
//直接改进实例对象的属性,解析器会先去找实例对象是否有这么些脾气(不会去找实例对象的
_proto_ 属性内的那个类的 prototype
属性,而是直接查看那么些实例是不是有照管的性质(与_proto_同级))
//若无则直接给那几个实例对象增加该属性,但不会改革类的prototype域的同名属性,既实例对象的_proto_属性内的那多少个类
prototype 域属性不会被涂改 car3_1.color = “red”;//car3_1指标内无名氏为color 的对象属性,故将该属性增添到该目的上
//剖判器对实例对象读取属性值的时候会先查找该实例有无同名的第一手属性
//如果未有,则查找__proto__属性内保存的那么些 当前类的 prototype
域的本性 //有就回去,无则持续寻觅是不是有原型链中的应和的方法属性
//有就回到,无则再次回到undefined alert(car3_1.color);//red
alert(car3_2.color);//blue alert(car3_2.color2);//undefined
//直接修正类的 prototype
域内的属性,不会默化潜移该类的实例对象的对象属性,但会影响实例对象的_proto_属性(_proto_属性内部存款和储蓄器放的是类的
prototype 域的从头到尾的经过) Car3.prototype.color = “black”;
alert(car3_1.color);//red
该目的有同名的直接属性,故不会去_proto_品质内查找类的 prototype
域的习性 alert(car3_2.color);//black 受影响
//直接改超过实际例对象的法子,深入分析器会先去找实例对象是否有那一个措施(不会去找实例对象的
_proto_ 属性内的那些类的 prototype
域的章程,而是径直查看那一个实例是还是不是有对应的措施(与_proto_同级))
//若无则直接给那些实例对象增添该形式,但不会改进类的prototype域的同名方法,既实例对象的_proto_属性内的那一个类
prototype 域方法不会被改进 //car3_1指标内无名氏称为 showColor
的对象方法属性,故将该方法属性增多到该对象上 car3_1.showColor =
function () { alert(“new function”); }
//深入分析器对实例对象调用方法属性的时候会先查找该实例有无同名的第一手情势属性
//若无,则查找_proto_属性内保存的那多少个 当前类的 prototype
域的方法属性 //有就赶回,无则延续查找是或不是有原型链中的附和的法子属性
//找到就再次来到,无则报错 car3_1.showColor();//new function
car3_2.showColor();//blue car3_1.abcd();//直接报错 //直接纠正类的
prototype
域内的措施属性,不会潜移暗化该类的实例对象的艺术属性,但会影响实例对象的_proto_属性(_proto_属性内部存款和储蓄器放的是类的
prototype 域的开始和结果) Car3.prototype.showColor = function () {
alert(“second function”); } car3_1.showColor();//new function
该对象有同名的措施属性,故不会去_proto_属性内查找类的 prototype
域的方法属性 car3_2.showColor();//second function 受影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
方法1
function Car3(){}//用空构造函数设置类名
Car3.prototype.color = "blue";//每个对象都共享相同属性
Car3.prototype.doors = 3;
Car3.prototype.drivers = new Array("Mike","John");
Car3.prototype.showColor = function(){
    alert(this.color);
};//每个对象共享一个方法版本,省内存。
 
var car3_1 = new Car3();
var car3_2 = new Car3();
 
alert(car3_1.color);//blue
alert(car3_2.color);//blue
alert(Car3.prototype.color);//blue
 
car3_1.drivers.push("Bill");
alert(car3_1.drivers);//"Mike","John","Bill"
alert(car3_2.drivers);//"Mike","John","Bill"
alert(Car3.prototype.drivers);//"Mike","John","Bill"
 
//直接修改实例对象的属性,解析器会先去找实例对象是否有这个属性(不会去找实例对象的 _proto_ 属性内的那些类的 prototype 属性,而是直接查看这个实例是否有对应的属性(与_proto_同级))
//如果没有则直接给这个实例对象添加该属性,但不会修改类的prototype域的同名属性,既实例对象的_proto_属性内的那些类 prototype 域属性不会被修改
car3_1.color = "red";//car3_1对象内无名为 color 的对象属性,故将该属性添加到该对象上
 
//解析器对实例对象读取属性值的时候会先查找该实例有无同名的直接属性
//如果没有,则查找__proto__属性内保存的那些 当前类的 prototype 域的属性
//有就返回,无则继续查找是否有原型链中的对应的方法属性
//有就返回,无则返回undefined
alert(car3_1.color);//red
alert(car3_2.color);//blue
alert(car3_2.color2);//undefined
 
//直接修改类的 prototype 域内的属性,不会影响该类的实例对象的对象属性,但会影响实例对象的_proto_属性(_proto_属性内存放的是类的 prototype 域的内容)
Car3.prototype.color = "black";
alert(car3_1.color);//red 该对象有同名的直接属性,故不会去_proto_属性内查找类的 prototype 域的属性
alert(car3_2.color);//black 受影响
 
//直接修改实例对象的方法,解析器会先去找实例对象是否有这个方法(不会去找实例对象的 _proto_ 属性内的那些类的 prototype 域的方法,而是直接查看这个实例是否有对应的方法(与_proto_同级))
//如果没有则直接给这个实例对象添加该方法,但不会修改类的prototype域的同名方法,既实例对象的_proto_属性内的那些类 prototype 域方法不会被修改
//car3_1对象内无名为 showColor 的对象方法属性,故将该方法属性添加到该对象上
car3_1.showColor = function () {
    alert("new function");
}
//解析器对实例对象调用方法属性的时候会先查找该实例有无同名的直接方法属性
//如果没有,则查找_proto_属性内保存的那些 当前类的 prototype 域的方法属性
//有就返回,无则继续查找是否有原型链中的对应的方法属性
//找到就返回,无则报错
 
car3_1.showColor();//new function
car3_2.showColor();//blue
car3_1.abcd();//直接报错
 
//直接修改类的 prototype 域内的方法属性,不会影响该类的实例对象的方法属性,但会影响实例对象的_proto_属性(_proto_属性内存放的是类的 prototype 域的内容)
Car3.prototype.showColor = function () {
    alert("second function");
}
car3_1.showColor();//new function 该对象有同名的方法属性,故不会去_proto_属性内查找类的 prototype 域的方法属性
car3_2.showColor();//second function 受影响

能够看来使用该措施即使说打打减弱了内部存款和储蓄器的荒凉,但仍不常,有个别对象的习性风度翩翩旦改造,全体因而类实例化得到的对象的__proto__内属性值也会随着变(实为援用),订正如下

现行反革命又要求这么的三个实例,你或然会像这么来定义:

6.构造器格局与原型方式的插花方式

JavaScript

//每种对象有专项的个性不会与别的对象分享 function Car4(sColor,iDoors){
this._color = sColor;//私有品质变量名称头加下划线标志 this._doors =
iDoors; this.drivers = new Array(“迈克”,”John”);//公有属性标记 }
//全部对象共享三个格局版本,减弱内部存款和储蓄器浪费 Car4.prototype.showColor =
function () { alert(this._color); }; var car4_1 = new Car4(“red”,4);
var car4_2 = new Car4(“blue”,3); car4_1.drivers.push(“Bill”);
alert(car4_1.drivers);//”Mike”,”John”,”Bill”
alert(car4_2.drivers);//”Mike”,”John”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//每个对象有专属的属性不会与其他对象共享
function Car4(sColor,iDoors){
    this._color = sColor;//私有属性变量名称头加下划线标识
    this._doors = iDoors;
    this.drivers = new Array("Mike","John");//公有属性标识
}
//所有对象共享一个方法版本,减少内存浪费
Car4.prototype.showColor = function () {
    alert(this._color);
};
 
var car4_1 = new Car4("red",4);
var car4_2 = new Car4("blue",3);
 
car4_1.drivers.push("Bill");
 
alert(car4_1.drivers);//"Mike","John","Bill"
alert(car4_2.drivers);//"Mike","John"

那也是常用的成立对象方式之风流浪漫

复制代码 代码如下:

7.动态原型格局

JavaScript

function Car5(sColor,iDoors,iMpg){ this.color = sColor; this.doors =
iDoors; this.mpg = iMpg; this.drivers = new Array(“迈克”,”John”);
//使用标记(_initialized)来判别是或不是已给原型授予了任何方式,保险格局长久只被创设并赋值三次if(typeof Car5._initialized ==
“undefined”){//因为此处的号子是外加在类上,故纵然先前时时期接对其进展更动,照旧有望现身重复创建的事态
Car5.prototype.showColor = function () {//为Car5增加贰个寄放在 prototype
域的章程 alert(this.color); }; Car5._initialized =
true;//设置三个静态属性 } } var car5_1 = new Car5(“red”,3,25); var
car5_2 = new Car5(“red”,3,25);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Car5(sColor,iDoors,iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("Mike","John");
 
    //使用标志(_initialized)来判断是否已给原型赋予了任何方法,保证方法永远只被创建并赋值一次
    if(typeof Car5._initialized == "undefined"){//因为这里的标记是附加在类上,故如果后期直接对其进行修改,还是有可能出现再次创建的情况
        Car5.prototype.showColor = function () {//为Car5添加一个存放在 prototype 域的方法
            alert(this.color);
        };
        Car5._initialized = true;//设置一个静态属性
    }
}
var car5_1 = new Car5("red",3,25);
var car5_2 = new Car5("red",3,25);

这种形式使得定义类像强类型语言比方 java 等语言的概念方式

var oCar2 = new Object();
oCar2.color = “blue”;
oCar2.doors = 5;
oCar2.mpg = 25;
oCar2.showColor = function () {
alert(this.color);
};

8.混合工厂形式

JavaScript

function Car6(){ var oTempCar = new Object; oTempCar.color = “blue”;
oTempCar.doors = 4; oTempCar.showColor = function () {
alert(this.color); }; return oTempCar; } var car6 = new Car6();

1
2
3
4
5
6
7
8
9
10
function Car6(){
    var oTempCar = new Object;
    oTempCar.color = "blue";
    oTempCar.doors = 4;
    oTempCar.showColor = function () {
        alert(this.color);
    };
    return oTempCar;
}
var car6 = new Car6();

是因为在 Car6()构造函数内部调用了 new 运算符,所以将忽视第四个 new
运算符(位于构造函数之外),
在构造函数内部创造的对象被传送回变量car6,这种方法在对象方法的内部管理方面与优质格局(工厂方法)有着相仿的难点.应尽量避免

1 赞 3 收藏
评论

图片 2

如此这般蒙受的主题材料是种种对象都须要重新定义一回她的字段和形式。很辛苦。

二、类的定义–工厂情势达成:

对地方的例证进行七个装进,利用函数的再次回到值来做作品:

复制代码 代码如下:

function createCar() {
var oTempCar = new Object();
oTempCar.color = “red”;
oTempCar.doors = 4;
oTempCar.mpg = 23;
oTempCar.showColor = function () {
alert(this.color);
};
return oTempCar;
}

调用方式:

var oCar1 = createCar();
var oCar2 = createCar();

这种措施被称呼工厂情势。工厂情势看起来是近水楼台先得月多了。起码创设一个对象的时候不再须要那么多的行数。因为各种属性(color,doors,mpg)的值都以一向的,还要求再次开展改变,利用参数字传送递来得以完结:

复制代码 代码如下:

function createCar(sColor, iDoors, iMpg) {
var oTempCar = new Object();
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function () {
alert(this.color);
};

return oTempCar;
}

var oCar1 = createCar(“red”, 4, 23);
var oCar2 = createCar(“red”, 4, 23);

oCar1.showColor();
oCar2.showColor();

如此做看似真的能够实现了目的了。达成也很简单,调用也很平价。不过有四个不是很好的地点:

1、从语义上看,在创造对象时不曾选取new运算符,就像不是那么正式(平日创设叁个对象都用二个new运算符来实现)。

2、不切合面向对象的特点–封装。在这里个事例中,oCar1和oCar2都有投机的showColor方法,并且她们的showColor都以一德一心的贯彻。不过实际是他们分享的是同四个函数。

也会有办法缓慢解决这一个分享函数的主题素材,利用函数指针来解决。在createCar函数之外更创立一个showColor函数,而oTempCar的showColor方法指向这么些showColor函数:

复制代码 代码如下:

function showColor() {
alert(this.color);
}

function createCar(sColor, iDoors, iMpg) {
var oTempCar = new Object();
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}
var oCar1 = createCar(“red”, 4, 23);
var oCar2 = createCar(“red”, 4, 23);

oCar1.showColor();
oCar2.showColor();

虽说这么解决了重新创设函数的难题,但那样的话,就使showColor函数看起来不像是对象的办法。

三、类的定义–构造函数格局落到实处:

复制代码 代码如下:

function Car(sColor, iDoors, iMpg) {
//通过构造函数的款型,会为各类对象生成单身的性质和函数
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function () {
alert(this.color);
};

发表评论

电子邮件地址不会被公开。 必填项已用*标注