码迷,mamicode.com
首页 > Web开发 > 详细

js继承实现

时间:2016-09-23 19:54:42      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

首先都知道js类是通过原型和构造器实现的,js中将类的方法放在function的prototype里面了,它的每一个实例对象都可以获得该类的方法,因此实现了继承

    

 1 function Person(name,sex){
 2     this.name = name;
 3     this.sex = sex;
 4 }
 5 Person.propotype.sayHello = function(){
 6     console.log(this.name + "say hello");
 7 }
 8 function Female(age){
 9     this.age = age;
10 };
11 //Female也是Person,那么Female怎么去实现继承呢?

 

实现继承:

  Female.prototype == Person.prototype  //错误的实现

  这种方式只是简单的将Femal的原型指向了Person的原型,即Female和Person指向同一个原型,当子类Female增删改原型方法时,父类Person的原型也会被改变,所以该方法是不可取的。那么应该怎么做呢?

  就是让Female的__proto__属性指向Person的prototype对象,而不是直接把prototype指向Person的prototype。

  但是Femal.prototyoe.__proto__ = Person.prototype;  //也是不正确的

  因为__proto__不是一个标准的语法,在有些浏览器是获取不到这个属性的。

  那么合理的做法应该是:让Female的prototype指向一个obejct,这个object的__proto__指向Person的prototype

  大概实现如下图:

技术分享

 

  那么具体实现是:通过Object.create()克隆一个新的prototype(该方法是在ES5中出现的,之前版本可以通过属性遍历实现浅拷贝)

    Female.prototype = Object.create(Person.prototype);

    console.log(girl instanceof Female); //false  这里又为什么是false?

  这里就还包含了一个问题,就是constructor的指向不对,因为是clone过来的prototype,那么prototype中的constructor还是指向Person(),那么需要把   

    Femal.construtor = Femal; 这样就彻底实现了继承

  一般可以将该实现封装成一个方法

  

1 function inherit(superType,subType){
2     var _propotype = Object.create(superType.propotype);
3     _propotype.construcotr = subType;
4     _propotype.propotype = _propotype;
5 }

那么完整代码:

  

 1 function Person(name,sex){
 2     this.name = name;
 3     this.sex = sex;
 4 }
 5 Person.propotype.sayHello = function(){
 6     console.log(this.name + "say hello");
 7 }
 8 function Female(name,sex,age){
 9     Person.call(this, name, sex);
10     this.age = age;
11 };
12 //Female也是Person,那么Female怎么去实现继承呢?
13 // 在继承函数之后写自己的方法,否则会被覆盖
14 Female.prototype.printAge = function(){
15     console.log(this.age);
16 };
17 var fm = new Female(‘Byron‘, ‘m‘, 26);
18 fm.sayHello();

 

 

 

 

  

js继承实现

标签:

原文地址:http://www.cnblogs.com/thonrt/p/5901099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!