面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同。实际上,JavaScript 语言是通过一种叫做 原型(prototype)的方式来实现面向对象编程的。

基于类的面向对象和基于原型的面向对象方式比较:

在基于类的面向对象方式中,对象(object)依靠 类(class)来产生。而在基于原型的面向对象方式中,对象(object)则是依靠 构造器(constructor)利用 原型(prototype)构造出来的。举个客观世界的例子来说明二种方式认知的差异。例如工厂造一辆车,一方面,工人必须参照一张工程图纸,设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的 类 (class),而车就是按照这个 类(class)制造出来的;另一方面,工人和机器 ( 相当于 constructor) 利用各种零部件如发动机,轮胎,方向盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。事实上关于这两种方式谁更为彻底地表达了面向对象的思想,目前尚有争论。

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。

每个对象都是基于一个引用类型创建的,这个引用类型可以是原生类型,也可以是自定义的类型。

1、创建对象

1)、创建自定义对象的最简单方式就是创建一个Object的实例,然后再为它添加属性和方法。

var person = new Object();
person.name = "Nicholas";
person.age = ;
person.job = "Software Engine"; person.sayName = function () {
alert(this.name);
}

2)、早期开发人员经常使用这个模式创建新对象。几年后,对象字面量成为创建这种对象的首选模式。

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

虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用一个接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。

3)、工厂模式

考虑到ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节。

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 o;
} var person1 = createPerson("Nicholas", , "Software Engineer");
var person2 = createPerson("Greg", , "Doctor");

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。随着发展,又一个新模式出现了。

4)、构造函数模式

ECMAScript 中的构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

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", , "Software Engineer");
var person2 = new Person("Greg", , "Doctor");

与工厂模式的不同之处:

  没有显式地创建对象;

  直接将属性和方法赋给了this对象;

  没有return语句。

按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

将构造函数当作函数

任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数,如果不通过new操作符来调用,那它跟普通函数也不会有什么两样。

//  当作构造函数使用
var person = new person("Nicholas", , "Software Engineer"); // 作为普通函数调用
Person("Greg", , "Doctor"); //添加到 window
window.sayName(); //"Greg" // 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", , "Nurse");
o.sayName(); //"Kristen"

构造函数的问题

构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。可以通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.syaName = sayName;
} function sayName () {
alert(this.name);
} var person1 = new Person("Nicholas", , "Software English");
var person2 = new Person("Greg", , "Doctor");

新的问题:如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在,这些问题可以通过使用原型模式来解决。

5)、原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。按照字母意思来理解,prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。

function Person () {

}

Person.prototype.name = "Nicholas";
Person.prototype.age = ;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
alert(this.name);
}; var person1 = new Person();
person.sayName(); //"Nicholas" var person2 = new Person();
person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true

原型对象的问题

原型模式也存在缺点。他省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。

原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说的过去,毕竟,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。

function Person() {

}

Person.prototype = {
constructor: Person,
friends : ["shelby", "court"]
}; var person1 = new Person();
var person2 = new Person();
person1.friends.push("van"); alert(person1.friends); //"shelby,court,van"
alert(person2.friends); //"shelby,court,van"
alert(person1.friends === person2.friends); //true

修改了person1.friends引用的数组,向数组中添加了一个字符串。由于friends数组存在于Person.prototype而非person1中,所以刚刚提到的修改也会通过person2.friends反映出来。这个问题正是我们很少看到有人单独使用原型模式的原因所在。

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

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。

function Person(name, age, job) {
this.name = name;
this.name = age;
this.job = job;
this.friends = ["shelby", "court"];
} Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name);
}
} var person1 =new Person("Nicholas", , "Software Engineer");
var person2 = new Person("Greg", , "Doctor"); person1.friends.push("van"); alert(person1.friends); //"shelby, court, van"
alert(person2.friends); //"shelby,count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

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

7)、其他

动态原型模式

有其他 OO 语言经验的开发人员看到独立的构造函数和原型时,很可能会感到非常困惑。动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

寄生构造函数模式

通常,在前述模式不适用的情况下,可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。

稳妥构造函数模式

道格拉斯发明了稳妥对象这个概念。其指的是没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中,或者在防止数据被其他应用程序(如 Mashup 程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new操作符调用构造函数。

2、对象继承

ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

1)、 原型链

基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含这一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。

实现原型链有一种基本模式,其代码大致如下。

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

原型链的问题

最主要的问题来自包含引用类型值的原型。前面介绍过包含引用类型值的原型属性会被所有实例共享;而这也是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。

function SuperType () {
this.colors = {"red", "blue", "green"};
} function SubType () { } SubType.prototype = new SuperType(); var instance1 = new SubType();
instance1.colors.push("black");
alert(instance.colors); //"red,blue,green,black" var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"

原型链的第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。实践中很少会单独使用原型链。

2)、 借用构造函数

在解决原型中包含引用类型所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术(伪造对象或经典继承)。这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数。通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。

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); //"red, blue, green"

A.传递参数

借用构造函数可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType (name) {
this.name = name;
} function SubType () {
//继承了 SuperType,同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = ;
} var instance = new SubType();
alert(instance.name); //"Nicholas"
alert(instance.age); //

B.借用构造函数的问题

无法避免构造函数模式存在的问题--方法都在构造函数中定义,因此函数复用就无从谈起了。借用构造函数的技术也是很少单独使用的。

3)、 组合继承

有时候也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

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.prototype = new SuperType ();
SubType.prototype.sayAge = function () {
alert(this.age);
} ; var instance1 = new SubType("Nicholas", );
instance1.colors.push("black");
alert(instance1.colors); //"red, blue, green, black" instance1.sayName(); //"Nicholas"
instance1.sayAge(); // var instance2 = new SubType("Greg", );
alert(instance2.colors); //"red, blue, green" instance2.sayName(); //"Greg"
instance2.sayAge(); //

组合继承避免了原型链和借用构造函数的缺陷,成为 JavaScript 中最常用的继承模式。而且,instanceof 和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

4)、其他

原型式继承

要求你必须有一个对象可以作为另一个对象的基础。ECMAScript 5 通过新增Object.create()方法规范化了原型式继承。接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。

寄生式继承

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

寄生组合式继承

组合继承最大的问题是会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

JavaScript创建对象及对象继承的更多相关文章

  1. javascript 创建对象及对象原型链属性介绍

    我们知道javascript里定义一个普通对象的方法,如: let obj = {}; obj.num = 1; obj.string = 'string'; obj.func = function( ...

  2. javascript中的对象之间继承关系

    相信每个学习过其他语言的同学再去学习JavaScript时就会感觉到诸多的不适应,这真是一个颠覆我们以前的编程思想的一门语言,先不要说它的各种数据类型以及表达式的不同了,最让我们头疼,恐怕就是面向对象 ...

  3. 详解JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...

  4. JavaScript 对象继承 OOP (三)

      对象继承 A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. JavaScript 语言的继承不通过 class (es6 中的class 不过是 ...

  5. JavaScript 的对象继承方式,有几种写法?

    JavaScript 的对象继承方式,有几种写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Pa ...

  6. JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...

  7. 架构师JavaScript 的对象继承方式,有几种程序写法?

    架构师JavaScript 的对象继承方式,有几种程序写法?   一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数, ...

  8. JavaScript内置对象与原型继承

    (一)   理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype    //tru ...

  9. javaScript 工作必知(七) 对象继承

    对象继承inherit var o = { r: 1 }; var c = function f() { }; c.prototype = o; c.r = 3; alert(o.r);//被继承的属 ...

随机推荐

  1. u3d_Shader_effects笔记6 第四章 使用cubeMap简单的反射读取

    一:前面心情: 1.今天开了个小会,该看的继续要看,不要堕落. 2.还有就是丽的生活习惯不太好.慢慢改变. 3.哎,公司人员争夺吗?哎,不知道,不了解,不去想,提升自己,内心明净 二.主要内容和参考 ...

  2. 嵌入式Linux驱动学习之路(十三)按键驱动-异步通知

    之前的按键方式: 查询: 极度占用CPU资源 中断: 在读的时候产生休眠,在没有信号的时候永远不会返回. poll机制: 在中断的基础上加上超时时间. 异步通知就是通过信号来传送. 首先在应用程序中有 ...

  3. MySQL的基本知识 -- 命令

    1.数据库和表 SHOW DATABASES; 返回可用数据库的一个列表 SHOW TABLES; 返回一个数据库内的表的列表 SHOW COLUMNS FROM tableName; 返回数据表的表 ...

  4. margin-top无效的问题解决方法

    今天碰到了margin-top无效的问题,解决方法也有很多一行代码就解决了 解决办法: 1.设置父元素或者自身的display:inline-block;(IE6.IE7不识别inline-block ...

  5. IE 6 全球分布图 - 中国一枝独秀

    随着 Windows 8.1 预览版的发布,IE11也与大家见面了,不久后 IE 11 还将登陆 Windows 7 平台.但是,时至今日,在世界的某个地方,仍然有大量的用户在使用老态龙钟的 IE 6 ...

  6. php设置浏览器响应时间

    ini_set('max_execution_time', '0'); ‘0’表示不受时间限制,一般默认30s;

  7. Android只能动态注册的广播Action

    只能动态注册的广播(部分): android.intent.action.SCREEN_ON android.intent.action.SCREEN_OFF android.intent.actio ...

  8. _UICreateCGImageFromIOSurface 使用API

    上传的时候,苹果发送邮件 Non-public API usage: The app references non-public symbols in DUO-LINK 4: _UICreateCGI ...

  9. Geolocation API JavaScript访问用户的当前位置信息

    Geolocation API在浏览器中的实现是navigator.geolocation对象,常用的有以下方法. 1.第一个方法是getCurrentPosition() 调用这个方法就会触发请求用 ...

  10. fedora22命令useradd,groupadd等命令不能自动补全

    sudo ls -l /sbin/useradd 发现登陆账户没有读权限 修改为其他账户为读权限即可