Javascript继承(上)——对象构建介绍

Javascript中存在“类”么?

万物皆对象
Javascript中除了基本数据(Undefined、Null、Boolean、Number、String),其他都是对象(Object)。
实际上,Javascript中的对象是数据与功能的集合。例如我们知道:


代码如下:

var foo = new Function("alert('hello world!')");
foo();

可见foo是一个函数,也是一种对象。再比如说:


代码如下:

function foo(){
//do something
}

foo.data = 123;
foo["data2"] = "hello";

alert(foo.data);
alert(foo.data2);

函数也可以像对象一样添加属性。
对象的构建
一般我们用构造函数来构建对象,但如果没有构造函数,我们也有办法构建我们想要的对象:


代码如下:

function creatPerson(__name, __sex, __age){
return {
name: __name,
sex: __sex,
age: __age,
get: function(__key){
alert(this[__key]);
}
};
}

var Bob = creatPerson("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.get("age"); //18

但是这不够,我希望方法是可以共享的。比如我再用该函数创建一个Tom对象,get函数就又被创建了一次,这明显地浪费了我的内存。
导入共享资源
因为我们知道函数也是对象,所以我们可以把需要共享的方法或属性放在放在他“身上”:


代码如下:

function creatPerson(__name, __sex, __age){
var common = arguments.callee.common;
return {
//自身的属性
name: __name,
sex: __sex,
age: __age,
//自身的方法
sayhi: function(){alert("hi");},
//共享的方法
get: common.get,
getType: common.getType,
//共享的属性
type: common.type
};
}
creatPerson.common = {
get:function(__key){
alert(this[__key]);
},
getType: function(){
alert(this.type);
},
type: "Person"
};

var Bob = creatPerson("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.getType(); //Person

于是我们就用蹩脚的方法,成功的创建了一个拥有自有属性方法和共享属性方法的对象。但实际上,Javascript就是这么蹩脚地创建对象的。
其实共享属性没有真正实现,因为这个共享属性,依然只是一个副本。这并不是我们真正希望的共享属性。

new关键字
和上面的“对象的构建”相同,new的目的是创建对象的自有属性和方法。例如:


代码如下:

function Person(__name, __sex, __age){
this.name = __name;
this.sex = __sex;
this.age = __age;
this.get = function(__key){
alert(this[__key]);
};
}

var Bob = new Person("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.get("age"); //18

原型(Prototype)
Javascript的作者用了和上面“导入共享资源”的方法差不多。既然函数也是对象,那么把需要共享的“东东”放在他“身上”吧:


代码如下:

function Person(__name, __sex, __age){
this.name = __name;
this.sex = __sex;
this.age = __age;
this.sayhi = function(__key){
alert("hi");
};
}
Person.prototype = {
constructor: Person,
get: function(__key){
alert(this[__key]);
}
};

var Bob = new Person("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
alert(Bob.constructor); //function Person

Javascript创建对象的模型是简洁的,new来处理自身问题,prototype来处理共享问题。

如果说Java的对象(实例)产生方式是将原材料丢到模子里(类)熔炼而成;那么Javascript的对象产生方式就是给材料给建筑工(构造函数)让他按图纸搭建而成。

实际流程

当然实际流程并不是这样的,新建一个对象先做的是处理共享资源,例如:


代码如下:

function A(){
console.dir(this);
alert(this.type); //A
}
A.prototype.type = "A";
var a = new A();

通过console.dir将a打印出来我们可以看到:














type "A"
__proto__ A {type = "A"}
  type "A"
  constructor A()

构造函数新建一个对象以后,立刻将其prototype的引用赋给新建对象的内部属性__proto__,然后再运行构造函数里面的构造语句。

并没有覆盖


代码如下:

function A(){
this.type = "B"
}
A.prototype.type = "A";

var a = new A();
alert(a.type); //B

当我们想得到a.type时,引擎会先去在a对象中查看是否有属性type,如果有则返回该属性,没有则试图在__proto__中查找是否有type属性,如果有则返回该属性。

__proto__并不是标准的,比如IE上没有,但IE上也有类似的内部属性,但我们也无法使用它。

基于这个原因,我们删掉a.type时依然可以返回a.type:


代码如下:

function A(){
this.type = "B"
}
A.prototype.type = "A";

var a = new A();
alert(a.type); //B
delete a.type;
alert(a.type); //A

到底有没有类?

严格地讲,Javascript并没有类(class)这种东西。
但有时候我们会用构造函数的名字作为利用该构造函数创建的对象们的“类型(type not class)名”,以方便我们用Javascript进行面向对象编程时的交流。
名字只是一个代号,一个方便理解的工具罢了。

参考文献

Javascript继承机制的设计思想

(0)

相关推荐

  • 关于JavaScript的面向对象和继承有利新手学习

    这是一篇关于JavaScript的面向对象和继承的文章,写于1年前,作者循序渐进,对想学习JavaScript中面向对象的同学来说是很有帮助的,因此试着翻译一下,不妥之处,请指正.原文链接Objects and Inheritance in Javascript 虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质,但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪.而不同的JS框架提供了各自的方法来编写类面向对象(class-

  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    如果用原型方式重定义前面例子中的类,它们将变为下列形式: 复制代码 代码如下: function ClassA() {} ClassA.prototype.color = "blue";ClassA.prototype.sayColor = function () {    alert(this.color);}; function ClassB() {} ClassB.prototype = new ClassA(); 原型方式的神奇之处在于最后一行代码.这里,把 ClassB 的

  • javascript是怎么继承的介绍

    第一个阶段: 复制代码 代码如下: function A(){ this.funB = function(){ alert('A:funB'); }; } A.prototype = { funA:function(){ alert('A:funA'); } }; function B(){ } function extend(sub,parent){ sub.prototype = new parent(); sub.prototype.constructor = sub; } extend(

  • JavaScript面向对象之Prototypes和继承

    一.前言 本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述,是理解JS OO 的佳作之一.翻译不好的地方望大家修改补充. 二.正文 JavaScript中的面向对象不同于其他语言,在学习前最好忘掉你所熟知的面向对象的概念.JS中的OO更强大.更值得讨论(arguably).更灵活. 1.类和对象 JS从传统观点来说是面向对象

  • 关于JavaScript中原型继承中的一点思考

    我们先看一段传统的继承代码: 复制代码 代码如下: //定义超类 function Father(){ this.name = "父亲"; } Father.prototype.theSuperValue = ["NO1","NO2"]; //定义子类 function Child(){ } //实现继承 Child.prototype = new Father(); //修改共享数组 Child.prototype.theSuperValue.

  • javascript继承之为什么要继承

    Quiz1 Javascript真的需要类(Class)么? 我们首先先看下其他有类(Class)的面向对象语言(如:Java)的一些特性. 父类与子类 父类(Superclass)和子类(Subclass),并不是为了解决父亲与儿子的问题,而是为了解决类的包含关系的,我们用Sub表示"子类",用Sup表示"父类",则有: Sub Sup 这是有区别的,例如通常我们能够将子类当成父类来使用,但认人的时候我们并不能把儿子当成父亲. 或者可以这么说,父类和子类不是为了解

  • javascrip关于继承的小例子

    复制代码 代码如下: //继承function Person(name,sex){   this.name=name;   this.sex=sex;}Person.prototype.sayName=function(){   alert(this.name);}Person.prototype.saySex=function(){   alert(this.sex);}function Worker(name,sex,job){    //继承person类     Person.call(

  • 基于JavaScript实现继承机制之调用call()与apply()的方法详解

    call() 方法call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身.例如: 复制代码 代码如下: function sayHello(sPrefix,sSuffix) {    alert(this.name + "says" + sPrefix + sSuffix);}; var obj = new Object();obj.name = "Tom"; sayHello.call(obj, &

  • 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

    继承的方式 ECMAScript 实现继承的方式不止一种.这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的.这意味着所有的继承细节并非完全由解释程序处理.作为开发者,你有权决定最适用的继承方式.最原始的继承实现方式就是对象冒充,下面着重介绍该方法. 对象冒充 对象冒充实现继承的核心其实依赖于在函数环境中使用 this 关键字.其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Class

  • 浅谈javascript的原型继承

    请看源码: 复制代码 代码如下: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateClass = function(){}; var ExtObject = Ext.Object = { chain: function (object) { TemplateClass.prototype =

  • javascript类式继承新的尝试

    我今天做的尝试是,如何更它更像其他的语言一样的使用继承机制,多层继承和更方面的调用父类的构造. 我希望达到的效果: 复制代码 代码如下: function A(){ alert('a'); } function B(){ this.$supClass(); alert('b'); } extend(B,A); function C(){ this.$supClass(); alert('c'); } extend(C,B); var c = new C(); alert( c instanceo

  • JavaScript对象创建及继承原理实例解剖

    对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 复制代码 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor 如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性 如: 复制代码 代码如下: function F(){}; F.prototype={

随机推荐