javascript继承—继承的实现原理(1)

打算针对js的继承写一系列文章,详细的分析js里继承原理,实现方式,各种继承方式的优缺点,以及最优继承方案,还有多继承的问题等….

面向对象的编程的核心是封装、继承和多态,js可以看作是一种面向对象的语言,而面向对象的扩展性最核心的部分是多态,多态的必要条件有三个,首先就是继承,其次父类的引用指向子类,最后是方法重写。对于js来说,由于其创建对象的方式多种多样,因此,需要对父类的多种属性和方法实现很好的继承,就必须找到一个比较完善的方法。本篇文章首选介绍三种最基本的继承方式,并分析这几种继承方式的缺陷。

介绍js继承前,大家先需要js里类的各种属性以及js创建对象的几种模式有所了解。

js类的属性可以参考:
javascript中类的属性研究 这篇文章。

js创建对象的方式可以参考:javascript创建对象的三种模式 这篇文章。

第一种方式:对象冒充

对象冒充,是指将父类的属性和方法一起传给子类作为特权属性和特权方法。


function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert(‘hi‘);
}
}

Person.prototype.walk = function(){
alert(‘walk.......‘);
}

function Student(name,age,grade){
this.newMethod = Person;
this.newMethod(name,age);
delete this.newMethod;
this.grade = grade;
}

var s1 = new Student(‘xiaoming‘,10,3);
console.log(s1.name,s1.age,s1.grade);//xiaoming 10 3
//s1.walk();//s1.walk is not a function

可见Student类只继承了Person类的特权属性和方法,并没有继承Person类的共有属性和方法。

第二种方式:call或apply

使用call或apply改变对象的作用域来实现继承,让父类的this等于新创建的子类的对象(因为call和apply继承实现机制是一样的,就是传参方式不同,call传多个参数用逗号隔开,apply用数组),本文主要介绍call来实现继承。


function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert(‘hi‘);
}
}

Person.prototype.walk = function(){
alert(‘walk.......‘);
}

function Student(name,age,grade){
Person.call(this,name,age);
this.grade = grade;
}

var s1 = new Student(‘xiaoming‘,10,3);
console.log(s1.name,s1.age,s1.grade);//xiaoming 10 3
//s1.walk();//s1.walk is not a function

同第一种问题一样,没有继承共有属性和方法。call改变了Person中this的作用域,使其指向了Student。对于call方法举例如下:

function Person(){
this.name =‘xiaoming‘;
}

Person.call(this);
alert(window.name);

此例将Person中this的作用域扩大到window上,使得Person中的name属性变为一个全局变量。

第三种方式:prototype

使用prototype属性实现继承,让父类的prototype赋给子类的prototype,也可以将父类的实例赋给子类的prototype,这里先介绍将父类的原型赋给子类的原型这种方式,并探讨这种方式的缺陷。在以后会着重介绍prototyp这种继承方式。


function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert(‘hi‘);
}
}

Person.prototype.walk = function(){
alert(‘walk.......‘);
}

function Student(name,age,grade){
this.grade = grade;
}

Student.prototype = Person.prototype;

var s1 = new Student(‘xiaoming‘,6,3);
s1.walk();//walk.......
console.log(s1.name,s1.age,s1.grade);//xiaoming 6 3
console.log(s1.constructor); // Person(name,age)
Student.prototype.study = function(){
alert(‘I am study‘);
}
var p1 = new Person();
p1.study();//I am study

主要缺陷:不能继承父类的特权属性和特权方法,子类的构造函数变成了Person(name,age),直接导致修改子类的原型方法时,父类也跟着修改了,耦合度太高了。

如果将父类的实例指向子类的原型会出现什么情况呢?


function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert(‘hi‘);
}
}

Person.prototype.walk = function(){
alert(‘walk.......‘);
}

function Student(name,age,grade){
this.grade = grade;
}

Student.prototype = new Person();

var s1 = new Student(‘xiaoming‘,6,3);
s1.walk();//walk.......
console.log(s1.name,s1.age,s1.grade);//undefined undefined 3
console.log(s1.constructor); // Person(name,age)
Student.prototype.study = function(){
alert(‘I am study‘);
}
var p1 = new Person();
//p1.study();// p1.study is not a function

虽然子类Student的实例s1仍然指向父类Person的构造函数,但此时修改子类的共有方法并不会对父类有所影响。然后这种方式存在一个更为严重的问题是,子类虽然继承父类的特权属性,但是没法进行修改。并且每创建一个子类的实例时都会把父类的所有属性和方法创建一遍,相对于继承父类的prototype属性中共有方法使用同一代码块对代码空间存在较为严重的浪费。

总结:几种继承方式各有各的缺陷,那么如何实现完美的继承呢。也许将其中的某两种继承方式结合起来才行。在以后会接着介绍call和prototype结合实现js的继承功能。

javascript继承—继承的实现原理(1),布布扣,bubuko.com

时间: 2024-08-02 07:01:07

javascript继承—继承的实现原理(1)的相关文章

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,由于js中没有后端语言中的类式继承,所以js中的继承,一般都是原型继承(prototype). function P (name){ this.name = name; this.say = function(){ console.log('p'); } } function S (name,id){ this.id = id; this.eat = function(){ console.log('s'); } } S.prototype = P.protot

Javascript 进阶 继承

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/29194261 1.基于类的继承 下面看下面的代码: <script type="text/javascript"> function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function () { console.log(this.na

彻底理解Javascript原型继承

彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员与原型成员 举一个<高性能Javascript>书中例子 var book={ title :"High Performance JavaScript", publisher:"Yahoo!Press" }; alert(book.toString());/

javascript类继承

function extend(subClass, superClass) { var f = function() {}; f.prototype = superClass.prototype; subClass.prototype = new f(); subClass.superClass = superClass.prototype; } var parent = function (name, age) { this._name = name; this._age = age; };

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat

浅话javascript的继承

javascript的继承和java或C#的继承是不一样的,后者是基于类的继承,而javascript是通过原型来继承的.所以,先得理一理原型是个什么鬼. 当一个函数对象被创建时,Function构造器产生的函数对象会运行类似这样一些代码:this.prototype={constructor:this},新对象被赋予prototype这样一个属性,它的值是一个包含constructor属性的对象.可以看出,这个constructor指向新对象本身.prototype属性指向的对象自然不会只有c

[JavaScript原型继承理解一]

转:http://www.cnblogs.com/harolei/p/3740354.html 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sponsor的一对一辅导和自己回来后反复思考,总算觉得把其中的精妙领悟一二了. 1. JavaScript创建对象 在面向对象语言中,通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象.但是在JavaScript中并没有类的概念

JavaScript组合继承的一点思考

今天看<JavaScript高级程序设计>一书中关于组合继承模式时,书上有这么一个Demo程序: <html> <head> </head> <body> <script> function SuperType(name){ this.name = name; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name,