JavaScript创建对象及对象继承

时间:2022-12-02 23:16:31

面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是在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. 给一个div绝对定位后,如何让它水平居中

    <style> .footer{position:absolute;left:0;right:0} </style> <div classs="footer&q ...

  2. 【转】互联网全站HTTPS的时代已经到来

    原文地址:http://blog.csdn.net/luocn99/article/details/39777707 前言 我目前正在从事HTTPS方面的性能优化工作.在HTTPS项目的开展过程中明显 ...

  3. Head First-策略模式

    策略模式,什么是策略模式,定义了算法族,分别封装起来,让他们之间可以相互替换,此模式让算法的变化独立于使用算法的客户. 下面我们就用鸭子来诠释一下策略模式,鸭子有两种行为呱呱叫和飞,但是并不是所有的鸭 ...

  4. ubuntu下virtualenv的复制

    将一个用户下的virtualenv复制到另一个用户下.直接复制无法使用,source后的python依旧是系统自带的python. 原始env名:/home/llx/work/nn/nnenv.bak ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. POJ&lowbar;2229&lowbar;Sumsets&lowbar;&lpar;动态规划&rpar;

    描述 http://poj.org/problem?id=2229 将一个数n分解为2的幂之和共有几种分法? Sumsets Time Limit: 2000MS   Memory Limit: 20 ...

  7. mysql密码忘记如何处理

    1,修改/etc/my.cnf添加添加skip-grant参数,重启mysql. 2,登录mysql  mysql -uroot 3, 更新user中root的密码  use mysql;   upd ...

  8. NYOJ 330 一个简单的数学

    一个简单的数学题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述 zyc近期迷上了数学,一天,dj想出了一道数学题来难住他.算出1/n,但zyc一时答不上来希望大家能 ...

  9. Yahoo前端优化十四条军规

    相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...

  10. 自学Zabbix1&period;3-zabbix进程

    默认情况下zabbix包含5个程序:zabbix_agentd.zabbix_get.zabbix_proxy.zabbix_sender.zabbix_server,另外一个zabbix_java_ ...