300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > js面向对象的程序设计 --- 下篇 继承启蒙

js面向对象的程序设计 --- 下篇 继承启蒙

时间:2018-09-19 03:07:41

相关推荐

js面向对象的程序设计  ---  下篇 继承启蒙

继承是oo语言中一个最为人津津乐道的概念。ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的

·原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

简单回顾一个构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的

内部指针。那么,假设我们让原型对象等于另一个类型的实例,结果会怎样呢?

// 生物的构造函数function Bio(){this.life = true}Bio.prototype.getLife = function () {return this.life;}// 动物的构造函数function Animal(){this.eat = true;}Animal.prototype = new Bio();// 狗的构造函数function Dog(master){this.master = master;}Dog.prototype = new Animal();var dog1 = new Dog("cl");console.log(dog1.life); // true console.log(dog1.constructor);/*输出:ƒ Bio(){this.life = true}为什么会这样,因为 Dog 和 Animal 的constructor 被重写了的缘故*/

上述代码中。我们没有使用Dog默认提供的原型,而是给它换了一个新原型。这个新原型就是Animal的实例。于是新原型不仅具有作为一个Animal

实例拥有的全部属性和方法,而且其内部还有一个指针,指向了Animal的原型...

通过实现原型链,本质上拓展了本章前面介绍的原型搜索机制。

默认的原型:

事实上,前面例子中展示的原型链少了一环。我们知道,所有的应用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家记住,所有引用类型

默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这正是所有自定义类型都会继承toString() ,valueOf()等

默认方法的原因。

确认原型和实例的关系:

可以通过两种方式来确定原型和实例之间的关系。

// 第一种方法:使用instanceof 操作符,只要用这个操作符检测实例与原型链出现过的构造函数,结果就会返回true。console.log(dog1 instanceof Dog);console.log(dog1 instanceof Animal);console.log(dog1 instanceof Bio);console.log(dog1 instanceof Object); // 全部为true// 由于原型链的关系,我们可以说dog1 是上述四个任何一个类型的实例// 第二种方法:使用isPrototypeOf() 方法。同样,只要原型链出现过的原型,都可以说是该原型链所派生的实例的原型console.log(Object.prototype.isPrototypeOf(dog1));console.log(Animal.prototype.isPrototypeOf(dog1));console.log(Bio.prototype.isPrototypeOf(dog1));console.log(Dog.prototype.isPrototypeOf(dog1)); // 全部为true

谨慎的定义方法

两点问题:

1: 不管怎么样,给原型添加方法的代码一定放在替换原型的语句之后

2:通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链

原型链的问题:

code..

function Super () {this.color = ["red","blue","green"];}function Sub () {}Sub.prototype = new Super();var ins1 = new Sub();ins1.color.push("black");console.log(ins1.color); // ["red", "blue", "green", "black"]var ins2 = new Sub();console.log(ins2.color); // ["red", "blue", "green", "black"]// 那么问题来了,由于Sub的所有实例都会共享这一个color属性,那么我们对ins1.color的修改能够通过ins2.color反映出来// 问题:在创建子类型的实例时,不能向超类型的构造函数传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的// 构造函数传递参数。有鉴于此,实践中很少会单独使用原型链

·借用构造函数

在解决原型中包括引用类型值所带来问题的过程中,开发人员使用一种借用构造函数的技术。这种技术的基本思想相当简单,即在子类型构造函数的

内部调用超类型构造函数

function Animal(name){this.name = name;}function Dog(){// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码Animal.call(this,"Nic");this.age = 29;}var ins = new Dog();console.log(ins.name); // Nicconsole.log(ins.age); // 29

借用构造函数的问题:

如果仅仅是借用构造函数,那么将无法避免构造函数模式存在的问题---方法都在构造函数中定义,那么函数复用就无从谈起。而且超类型的原型定义的

方法,对子类型而言也是不可见的,结果所有类型都只能用构造函数模式。考虑到这些问题,借用构造函数的模式也很少使用

·组合继承

组合继承也叫伪经典继承,指的是将原型链和构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性

和方法的继承,而使用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个实例都有它自己的属性。

上面的代码可以这样改写:

function Animal(name){this.name = name;}Animal.prototype.home = 'north';function Dog(){// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码Animal.call(this,"Nic");this.age = 29;}Dog.prototype = new Animal();Dog.prototype.constructor = Dog; // 修正构造函数var ins = new Dog();console.log(ins.name); // Nicconsole.log(ins.age); // 29console.log(ins.home); // north

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为javascript中最常用的继承模式。而且,instanceof和isPrototypeOf()也

能够用于识别基于组合继承创建的对象。

·原型式继承

这种方法没有严格意义上的构造函数。他的想法是借助原型基于已有的对象创建新对象,同时还不必因此创建自定义类型:

function object(o){function F(){};F.prototype = o;return new F();}//在object() 函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。// 从本质上来讲,object()对传入的对象执行了一次浅复制var person = {name : "Ni",friends : ['She','Co'],}var anotherPerson = Object(person);anotherPerson.friends.push('tom');var yetAnotherPerson = Object(person);console.log(yetAnotherPerson.friends); // ["She", "Co", "tom"]// ECMAScript5通过新增Object.create() 方法规范了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义// 额外属性的对象。在传入一个参数的情况下,Object.create() 与 object()方法的行为相同var myPerson = Object.create(person,{demo:{value:"G"}});console.log(myPerson.demo); //G// 在没有兴师动众的插件构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承式完全可以胜任的。不过别忘了,包含引用类型的值// 的属性始终都会共享相应的值,就像适应原型模式一样·寄生式继承寄生式继承是与原型式继承紧密相关的一种思路,并且同样也是由上面的作者推而广之的。寄生式继承的思路与继承构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象function object(o){function F(){};F.prototype = o;return new F();}function createAnother(orginal){var close =object(orginal); // 通过调用函数创建一个新对象close.sayHi = function () { // 以某种方式增强这个对象console.log('hi');}return close; // 返回这个对象 }var person = {'name' : "Ni",friends : ["She","Co"],}var anPer = createAnother(person);anPer.sayHi(); // hi//在考虑到对象不是自定有类型和构造函数的情况下,寄生式继承也是一种游泳的模式,前面示范继承模式时使用的object()函数不是必需的;任何能返回新// 对象的函数都适用于此模式// 使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数模式类似

·寄生组合式继承

前面说过,组合继承时js最常用的继承模式;不过它也有自己的不足。组合继承最大的问题是无论什么情况下,都会调用两次超类型构造函数。一次在

创建子类原型的时候,另一次是在子类构造函数内部。没错,,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数

时重写这些属性。再看下组合继承的例子:

function Super(name){this.name = name;this.color = ['red','blue'];}Super.prototype.sayName = function () {console.log(this.name);}function Sub(name,age){Super.call(this,name); // 第二次调用Super();this.age = age;}Sub.prototype = new Super(); // 第一次调用Super();Sub.prototype.constructor = Sub;Sub.prototype.sayAge = function () {console.log(this.age);}var demo = new Sub('cl','25');demo.sayAge(); // 25// 不知道你有没有发现。第一次调用Super构造函数时,Sub.prototype会得到两个属性:name 和 color是,它们都时Super的实例属性,只不过// 位于Sub的原型中。当调用Super构造函数时,又一次在新对象上创建了name 和 color 。于是,这两个属性就屏蔽了原型中的两个同名属性// 好在我们已经找到解决这个问题方法 --- 寄生组合式继承// 所谓继承组合式继承,即姐哟个构造函数来继承属性,通过原型链的混成形式继承方法。其背后的基本思路是:不必为了指定子类型的原型而// 调用超类型的构造函数,我们所需要的无非是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将// 结果制定给子类型的原型。寄生组合式继承的基本模式如下:function inheritPrototype(subType,superType) {var prototype = Object.create(superType.prototype); // 创建对象prototype.constructor = subType; // 增强对象subType.prototype = prototype;// 指定对象}/*这个示例中的 inheritPrototype() 函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是创建超类型原型的一个副本。第二步为创建的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性。最后一步,将创建的对象(即副本)赋值给子类型的原型。这样我们就可以调用inheritPrototype()函数的语句,去替换前面例子中为子类原型赋值的语句了:*/function SuperType(name){this.name = name;this.color = ['red','blue','green'];}SuperType.prototype.sayName = function () {console.log(this.name);}function SubType(name, age){SuperType.call(this,name);this.age = age;}inheritPrototype(SubType,SuperType);SubType.prototype.sayAge = function () {console.log(this.age);}var xx = new SubType('cl',14);console.log(xx);// 这个例子高效率体现在它之调用了一次SuperType构造的函数,并且因此避免了在SubType.prototype上创建不必要,多余的属性。与此同时,// 还能够正常使用instanceof 和 isPrototypeOf() 。开发人员普遍认为寄生组合式继承是最理想的继承范式。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。