javascript 继承

javascript ES5 并没有所谓class 类,所以自然不能像c++,Java 那样子类继承父类,但是javascript还是可以实现继承的。

主要的继承方式分为构造函数继承和非构造函数继承

一、构造函数继承

构造一个原型函数,将需要定义的属性方法,通过指定 this 指向赋值;通过 new 方法实例化对象

1 function Person(name,sex,age,interest){
2   this.name=name;
3  this.age=age;
4  this.sex=sex;
5  this.interest=interest;
6  }

为了在实例化对象后,每个对象相同的属性方法占用内存,我们将对象相同不变的方法和属性放在对象的prototype上,这样子每个实例相同部分都指向同一个内存地址

 1 Person.prototype.action ="walk" ;
 2  Person.prototype.mouth = "eat and speak";
 3
 4 var Mary =new Person("mary","woman","20","shopping");
 5  var Tom = new Person("tom","man","23","play baseketball");
 6
 7  "eat and speak"
 8  Mary.action
 9  //"walk"
10  Tom.mouth
11  //"eat and speak"

如果觉得要写很多prototype.什么很麻烦,也可以直接另外写一个"父类"方法函数,将不变的东西放在里面,然后"子类"的原型函数中进行函数绑定,例如在Person 中加 :

primaryPerson.apply(this, arguments);   //primaryPerson 为"父类" 函数;

二、非构造函数方法

浅拷贝

 1 var Person ={
 2
 3 action :‘walk‘;
 4
 5 }
 6
 7 var Man ={
 8 name :"bentos",
 9 age : "20",
10 bithPlace :shantou"
11 }

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

1 function extendCopy(p) {
2     var c = {};
3     for (var i in p) {
4       c[i] = p[i];
5     }
6     c.uber = p;
7     return c;
8   }

使用的时候,这样写

1 var Man= extendCopy(Person);
2 console.log(Person.action);
3 //walk

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

现在给Person添加一个"脸"属性,它的值是一个数组。

1 Person.face = [‘mouth‘,‘eye‘,‘nose‘];

通过extendCopy()函数,Man继承了Person。

1 var Man = extendCopy(Person);

然后,我们为Man的"face"添加一个属性:

1 Man.face.push(‘smalleye‘);

发生了什么,Person 的属性也被改变了

1 Person.face
2 ["mouth", "eye", "nose", "smalleye"]

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

深拷贝

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

 1 function deepCopy(p, c) {
 2     var c = c || {};
 3     for (var i in p) {
 4       if (typeof p[i] === ‘object‘) {
 5         c[i] = (p[i].constructor === Array) ? [] : {};
 6         deepCopy(p[i], c[i]);
 7       } else {
 8          c[i] = p[i];
 9       }
10     }
11     return c;
12   }

使用时这样写

var Person= deepCopy(Man);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性,这时,父对象不会受到影响了。

时间: 2024-10-26 08:29:36

javascript 继承的相关文章

闲聊javascript继承和原型

javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instanceof的验证 //拷贝继承,prototype.js的extend=> function extend(destination,source){ for(var property in source) destination[property]=source[properyt]; return des

javascript继承的三种方法

javascript并不是纯粹的面向对象的语言,因此也没有明确的继承方式,但可以通过一些方式来模拟继承.本文总结常见的javascript继承模拟方式 1,对象继承 //父类 function Person(name,age){ this.name = name; this.age = age; }; Person.prototype.height = "170cm"; //子类 function Boy(){ this.speak = function(){ alert("

javascript继承

原型链继承 1 <script> 2 function Parent(){ 3 this.name = 'mike'; 4 } 5 6 function Child(){ 7 this.age = 12; 8 } 9 Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条 10 11 var test = new Child(); 12 alert(test.age); 13 alert(test.name);//得到被继承的属性 14

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

javascript继承—prototype属性介绍(2)

js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向自身.这会形成一个非常有意思的链式结构.举例如下: function Person(){ this.name =12; } console.log(Person.prototype); console.log(Person.prototype.constructor);//输出Person,指向自身

一种基于ES5的JavaScript继承

关于JavaScript继承,方式很多,包括compile-to-javascript的语言TypeScript, CoffeeScript以及网站MDN, GitHub, Modernizr各种polyfill都给出了稳妥的实现方案. 从ES5的角度看,这其中一些方案在功能上OK,但在语义上却不尽如人意. 本人从这些方案中采取一些比较潮的思路,整理出一份方案,可实现与原生DOM类继承的风格一致,达到功能和语义兼得的效果(当然,就别再老想着99后ES3了). 如果你的WebApp是基于ES5运行

面向面试编程——javascript继承的6种方法

javascript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script type="text/javascript"> function Person(name,sex) { this.name=name; this.sex=sex; this.friends=['李四']; this.getName=function(){ alert(this.name

javascript继承的实现方式介绍

javascript继承的实现方式介绍:作为面向对象的一门语言,继承自然是javascript所比不可少的特性,下面就简单介绍一下javascript实现继承的几种方式,希望能够对需要的朋友带来一定的帮助,下面进入正题.一.对象冒充: function A() { this.name="蚂蚁部落"; this.address="青岛市南区"; } function B() { this.target="提供免费的教程"; this.newA=A;

重温Javascript继承机制

原文:http://mozilla.com.cn/post/21667/ =========================== 上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网

javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) - jssl915

一.利用空函数实现继承 参考了文章javascript继承-prototype属性介绍(2) 中叶小钗的评论指点,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权属性和特权方法,私有属性,私有方法的空耗资源问题. function Person(name,age){ this.name = name; this.age = age; } Person.prototype = { constructor:Person, sayHi:function(){