www.5197.com-澳门新蒲京娱乐场官网

热门关键词: www.5197.com,澳门新蒲京娱乐场官网

用JavaScript实现单继承和多继承的简单方法_js面向

JavaScript就其本质是函数式编程语言,是Lisp的后代,同时又加入了一下面向对象编程的元素,放弃了一些难懂的函数式语言的元素。 函数式编程语言可以实现面向对象编程,这是毫无疑义的,Curry方法可以实现对类和对象的模拟。但是JavaScript提供了另一种实现OOP的方法:原型继承。 因此,JavaScript实现面向对象编程和一般的函数式编程语言还是有所区别的。 本文我将会给大家介绍JavaScript实现单继承和多继承的方法。 用原型实现单继承: 有很多JavaScript库提供了一些函数帮助实现单继承。但实际上,JavaScript本身就提供了原型继承的方法。因此,根本不需要提供特定的方法来实现,简单使用JavaScript代码就可以实现单继承。但是,JavaScript提供的原型继承方法很容易犯错,下面我给大家演示一下怎样简洁明了地实现原型继承。 假设MyB继承MyA类,那么,代码如下: function MyA(){ if(MyA.prototype.baseClass!==undefined){ MyA.prototype.baseClass.call; } ……一般代码 } function MyB(){ if(MyB.prototype.baseClass!==undefined){ MyB.prototype.baseClass.call; } ……一般代码 } MyB.prototype=new MyA(); MyB.prototype.baseClass=MyB.prototype.constructor;//使用baseClass引用//基类的构造器函数。 MyB.prototype.constructor=MyB;//恢复子类的构造器属性 用于未来通过这个属性判//断对象的类型。 var myA=new MyA; 上述javascript代码中,我在每一个构造函数中都添加了这么一段代码: if(ClassName.prototype.baseClass!==undefined){ ClassName.prototype.baseClass.call; } 这段代码寻找原型中的baseClass方法,如果有,就调用它。 在后面的原型继承的实现中,我为子类创建了baseClass属性,它的值是基类的构造函数。因此,只要遵守我的方式编写代码,就可以保证基类的构造函数在子类构造实例时会得到执行。 现在,如果MyA类又继承了Base类,只需要添加3行原型继承代码即可: MyA.prototype=new Base(); MyA.prototype.baseClass= MyA.prototype.constructor;//使用baseClass引用//基类的构造器函数。 MyA.prototype.constructor= MyA;//恢复子类的构造器属性 用于未来通过这个属性判//断对象的类型。 不需要修改MyA类本身的代码,MyA类及其子类MyB类的实例就都可以得到正确的执行。 那些JavaScript库实现的继承,需要修改Object,Function等基类,容易引起冲突。还有一些方法,每一次实现继承,都必须手工修改子类的构造函数,以使构造函数能够正确调用基类的构造函数。 上面提供的方法编写JavaScript代码很好地解决了这些问题。 用Mixin实现多继承 JavaScript本身并没有提供多继承的机制,但我们可以使用Mixin这种技巧实现多继承的效果。 下面是我编写的Mixin助手方法,可以为类和对象动态添加属性。 1,copyClassPrototypeProperties复制类的原型属性 /** * 把源类原型上的所有属性复制到目标对象上,第一个参数是boolean值,表示是否覆盖目标类的原型的属性 */ function copyClassPrototypeProperties(isOverride,receivingClass,givingClass){ if{ for(var i=3;i2,copyObjectProperties复制对象的属性 /* * 把源对象的所有属性复制到目标对象上,第一个参数是boolean值,表示是否覆盖目标对象的属性 */ function copyObjectProperties(isOverride,receivingObject,givingObject){ if{ for(var i=3;i3,copyProperties复制属性到对象 /* * 把属性复制到目标对象中,属性可以有任意多个,并且可以是数组。 */ function copyProperties{ for (var i=1;i

var baseClass = function(){};
var derivedClass = function(){};
derivedClass.prototype = new baseClass();//use inheritance

//Typed Wrappers
var b = new Boolean(true);
Object.prototype.toString.call(b);//"[object Boolean]"
var n = new Number(1);
Object.prototype.toString.call(n);//"[object Number]"
var s = new String("abc");
Object.prototype.toString.call(s);//"[object String]"经常会使用slice方法截取结果中类型的信息:

Object.prototype.toString()方法是一个底层的方法,使用它可以返回一个字符串,该字符串表明了对象的类型。也可以用于判断null和undefined。下面列出了多数常见的类型。

使用 Object.prototype.toString()方法

Object.prototype.toString.call(3);//"[object Number]"
Object.prototype.toString.call(NaN);//"[object Number]"
Object.prototype.toString.call([1,2,3]);//"[object Array]"
Object.prototype.toString.call(true);//"[object Boolean]"
Object.prototype.toString.call("abc");//"[object String]"
Object.prototype.toString.call(/[a-z]/);//"[object RegExp]"
Object.prototype.toString.call(function(){});//"[object Function]"

如果判断来自不同frame或来自不同window的变量的对象的类型,那么constructor属性无法正常工作。因为不同window的核心类型不同[1]。

// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // use Array.isArray or Object.prototype.toString.call to differentiate regular objects from arrays
typeof new Date() === 'object';

new Number(3) instanceof Number // true
new String('abc') instanceof String //true
new Boolean(true) instanceof Boolean //true然而,instanceof在cross-frame和cross-window的情况下也无法正常工作。

var Foo = function(){};
Foo.prototype.constructor === Foo;//true通过new调用构造函数所生成的对象以构造函数的prototype属性为原型。虽然JavaScript中没有类的概念,但是构造函数的作用同类的名称相似,是对象类型的标识。访问对象继承的constructor属性可以查看对象的类型。原始类型的变量也可以访问constructor属性,因为在访问的时候JavaScript形成了一个包装对象。

derivedClass.prototype.constructor = derivedClass;使用constructor进行判断变量类型虽然方便,但是不见得特别安全,所以需要小心。

typeof undefined;//"undefined"
typeof null;//"object" This stands since the beginning of JavaScript
typeof /s/ === 'object'; // Conform to ECMAScript 5.1typeof 包装对象的结果是‘object’需要注意。这里不评价好与不好(如果需要区分包装对象和原始类型呢)。但是typeof不是一个健壮的方法,要小心使用。比如:

 1 //basic objects
 2 var obj = {name: "obj"};
 3 obj.constructor === Object;//true
 4
 5 //self defined "class"
 6 var Foo = function(){};
 7 var f = new Foo();
 8 f.constructor === Foo;//true
 9
10 //primitive types
11 //Number
12 var num = 1;
13 num.constructor === Number;//true
14 var nan = NaN;
15 nan.constructor === Number;//true
16 //Boolean
17 var b = true;
18 b.constructor === Boolean;//true
19 //String
20 var s = "string";
21 s.constructor === String;//true
22 //Function
23 var Fun =function(){};
24 Fun.constructor === Function;//true;然而,constructor属性是可以重新复制或者覆盖的,这会引起类型判断的错误。即使我们一般不会刻意去给constructor属性赋值,但是有一些情况下constructor属性的值和我们所期望的值不同。看下面例子:

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // Despite being "Not-A-Number"
typeof Number(1) === 'number'; // but never use this form!

最近阅读了一些关于JavaScript判断对象类型的文章。总结下来,主要有constructor属性、typeof操作符、instanceof操作符和Object.prototype.toString()方法这四个方式来判断对象的类型。

Object.prototype.toString.call("abc").slice(8,-1);//"String"使用typeof 运算符

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // but never use this form!

instanceof操作符判断一个对象的原型链中是否存在某个构造函数的prototype属性[2]。原型链的概念可以阅读JavaScript面向对象编程(一)原型与继承。下面的代码形成了原型链obj1->derivedClass.prototype->baseClass.prototype->...->Object.prototype。Object.prototype是所有对象的原型,anyObj instanceof Object === true。

var s = "I am a string";
typeof s === "string";
//Add a method to String
String.prototype.A_String_Method = function(){
    console.log(this.valueOf());
    console.log(typeof this);
};
s.A_String_Method();
//I am a string
//object

obj2 = Object.create(derivedClass.prototype);
obj2 instanceof baseClass;//true
obj2 instanceof derivedClass;//true
obj2 instanceof Object;//trueconstructor属性可以应用到除了null和undefined之外的原始类型(数字、字符串、布尔类型)。而instanceof不可,但是可以使用包装对象的方法进行判断。

3 instanceof Number // false
'abc' instanceof String // false
true instanceof Boolean // false

//null and undefined in Chrome and Firefox. In IE "[object Object]"
Object.prototype.toString.call(null);//"[object Null]"
Object.prototype.toString.call(undefined);//"[object Undefined]"

var baseClass = function(){};
var derivedClass = function(){};
derivedClass.prototype = new baseClass();

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // an undefined variable

constructor属性

//self defined Objects
var a = new Foo();
Object.prototype.toString.call(a);//"[object Object]"

使用instanceof操作符

var obj1 = new derivedClass();
obj1 instanceof baseClass;//true
obj1 instanceof derivedClass;//true
obj1 instanceof Object;//true

typeof new Boolean(true) === 'object'; // this is confusing. Don't use!
typeof new Number(1) === 'object'; // this is confusing. Don't use!
typeof new String("abc") === 'object';  // this is confusing. Don't use!

Type Result
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Host object (provided by the JS environment) Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms) "function"
E4X XML object "xml"
E4X XMLList object "xml"
Any other object "object"

// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof always return a string
typeof String("abc") === 'string'; // but never use this form!

var obj = new derivedClass();
obj.constructor === derivedClass;//false;
obj.constructor === baseClass;//true;因为子类的prototype以父类的实例为原型,所以通过子类实例访问constructor就是父类构造函数。因此在JavaScript面向对象编程中,我们会在定义子类时加上一句代码来纠正constructor属性。

cross-frame和cross-window问题:

...

在MDN的一篇文档中已经很详细介绍了这个[3]。typeof能返回的信息较少,有"undefined"、"object"、"boolean"、"number"、"string"、"function"、"xml"这几种。

构造函数预定义的constructor属性是构造函数本身。

本文由www.5197.com发布于服务器运维,转载请注明出处:用JavaScript实现单继承和多继承的简单方法_js面向