Javascript中非函数对象的继承使用说明

另一种则是基于"非函数对象"的继承,不涉及function。它的做法与前一种情况完全不同。

一、什么是"非函数对象"的继承?

比如,现在有一个对象,叫做"中国人"。

 代码如下 复制代码

var Chinese = {

nation:'中国'

};

还有一个对象,叫做"医生"。

var Doctor ={

career:'医生'

}

请问,我怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?

二、object()方法

json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。

 代码如下 复制代码

function object(o) {

function F() {}

F.prototype = o;

return new F();

}

这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

使用的时候,第一步先在父对象的基础上,生成子对象:

 代码如下 复制代码

var Doctor = object(Chinese);

然后,再加上子对象本身的属性:

 代码如下 复制代码

Doctor.career = '医生';

这时,子对象已经继承了父对象的属性了。

 代码如下 复制代码

alert(Doctor.nation); //中国

三、浅拷贝

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

下面这个函数,就是在做拷贝:

 代码如下 复制代码

function extendCopy(p) {

var c = {};

for (var i in p) {

c[i] = p[i];

}

c.uber = p;

return c;

}

使用的时候,这样写:

 代码如下 复制代码

var Doctor = extendCopy(Chinese);

Doctor.career = '医生';

alert(Doctor.nation); // 中国

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。

 代码如下 复制代码

Chinese.birthPlaces = ['北京','上海','香港'];

通过extendCopy()函数,Doctor继承了Chinese。

 代码如下 复制代码

var Doctor = extendCopy(Chinese);

然后,我们为Doctor的"出生地"添加一个城市:

 代码如下 复制代码

Doctor.birthPlaces.push('厦门');

发生了什么事?Chinese的"出生地"也被改掉了!

 代码如下 复制代码

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

 代码如下 复制代码

function deepCopy(p, c) {

var c = c || {};

for (var i in p) {

if (typeof p[i] === 'object') {

c[i] = (p[i].constructor === Array) ? [] : {};

deepCopy(p[i], c[i]);

} else {

c[i] = p[i];

}

}

return c;

}

使用的时候这样写:

 代码如下 复制代码

var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

 代码如下 复制代码

Chinese.birthPlaces = ['北京','上海','香港'];

Doctor.birthPlaces.push('厦门');

这时,父对象就不会受到影响了。

 代码如下 复制代码

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港

目前,jQuery库使用的就是这种继承方法。

时间: 2024-10-01 01:23:26

Javascript中非函数对象的继承使用说明的相关文章

javaScript的函数对象的声明详解_javascript技巧

写作缘由: 平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明. 函数声明   函数声明示例代码 复制代码 代码如下: function fn () {     console.log('fn 函数执行..');     // code.. } 这样

新手入门:理解JavaScript中函数的使用

javascript|函数 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-} var func2=function(-){-}; var func3=function func4(-){-}; var func5

JavaScript中的对象、函数和继承

1. Javascript中的对象.JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象. 1. Javascript中的对象 JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象.有人说js中所有的都是对象

JavaScript对象及继承教程之内置对象(1)

一. 类与对象 在 JavaScript 世界里,关于面向对象第一个要澄清的概念就是类.对象都是有类来定义的,通过类来创建对象就是我们所熟悉的实例化.然而,在 JavaScript 中别没有真正的类,对象的定义就是对象自身.而 ECMA-262 干脆把这种妥协的方式称作为对象的调和剂.为了方便理解,我通常把这个发挥类的作用的调和剂称为类. 二. 内置对象 1. Array类 数组在 js 中是非常常用的一种数据结构,由于其灵活性和易用性,合理的使用数组可以帮助我们更好的实现相应的功能. 让我们先

Javascript学习6 - 类、对象、继承

原文:Javascript学习6 - 类.对象.继承     Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成的.     在Javascript中,可以把对象(object)定义为"属性的无序集合",每个属性存放一个原始值.对象或者函数.理解这一点非常重要. ECMAScript定义:对象由特性(attribute)构成,特性可以是原始值,可以是引用值,如果特性存放的是函数,它将被看作对

javascript 用函数实现继承详解_javascript技巧

一.知识储备: 1.枚举属性名称的函数: (1)for...in:可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性) (2)Object.keys():返回数组(可枚举的自有属性) (3)Object.getOwnPropertyNames():所有的自有属性 3.属性的特性:数据属性和存取器属性 (1)数据属性:可写(writable)  可枚举(enumerable)  可配置(configurable)  值(value) 数据属性只有一个简单的值: (2)存取器属性: 写

javascript基于原型链的继承及call和apply函数用法分析_javascript技巧

本文实例讲述了javascript基于原型链的继承及call和apply函数用法.分享给大家供大家参考,具体如下: 1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承方式跟JAVA中有很大的区别,JS中通过原型链的方式实现继承. (1)对象的原型:因为JS中,函数也是对象,因此我们先从对象出发.什么是对象的原型,原型的定义为: 所有通过对象直接量创建的对象都具有同一个函数原型,并且可以通过Object.prototype获

JavaScript中的对象继承关系_javascript技巧

我们今天就来看一下继承中的类继承以及类继承和原型继承的混用,所谓类继承,就是使用call或者apply方法来进行冒充继承: function Desk(size,height){ this.size=size; this.height=height; } function MJDesk(size,height){ Desk.call(this,size,height);//这种就叫类继承. } var mj = new MJDesk(10,123); 像上面这种就是我们要使用的类继承,用这种继承

javascript的函数、创建对象、封装、属性和方法、继承_javascript技巧

一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------