js继承

最新推荐文章于 2024-10-01 18:51:18 发布

weixin_33754913

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量72

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/8997003.html

版权

js继承

一、总结

1、js继承：和c++，java不一样，是通过对象冒充，原型链，混合模式来实现的

2、基础打牢：基础打牢，后面就很轻松

二、js继承

继承继承的相关概念

这里的继承和我们现实生活的中儿子继承父亲财产的这种关系虽然有相似的地方，但本质其实不一样；
举一个简单的例子理解继承的含义：
- 猴子--会法术的猴子--孙悟空；
- 会法术的猴子和猴子是我们这里所说的继承关系;
- 会法术的猴子是猴子的一种，即猴子是会法术的猴子的类型；
- 孙悟空是会法术的猴子的一个实例，即会法术的猴子是孙悟空的类；
- 孙悟空即使会法术的猴子的一种，也是猴子的一种，这种关系就和我们接下来要讲的继承是一个道理；
- 在程序里我们将猴子叫做父类(超类，基类)，会法术的猴子是他的子类(子类型，派生类)，会法术的猴子继承了猴子的所有特征；
- 会法术的猴子是孙悟空的类；孙悟空是会法术的猴子的实例；
一旦确定了两个类的继承关系，就包含以以三个意思：
1. 子类的实例可以共享父类的方法
2. 子类可以覆盖或扩展父类的方法
3. 子类和父类都是子类实例的类型

继承的实现

实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。所以大家看参考书的时候会发现很多种实现继承的方式，这里我们介绍最常用的几种。

1. 对象冒充(构造函数绑定):
  原理如下：使用对象冒充（call或apply方法）（实质上是改变了this指针的指向）继承基类。
2. 原型链
  这种方法更常见，使用prototype属性。
  - prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。
  - 原型链的弊端是不支持多重继承。记住，原型链会用另一类型的对象重写类的 prototype 属性。
  - 子类的所有属性和方法都必须出现在 prototype 属性被赋值后，因为在它之前赋值的所有方法都会被删除。因为 prototype 属性被替换成了新对象，添加了新方法的原始对象将被销毁。
3. 混合方式
  我们曾经讲解过创建类的最好方式是用构造函数定义属性，用原型定义方法。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法。

三、代码

2-10

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9   /*
10     function Monkey(_type,_home){
11       this.type=_type;
12       this.home=_home;
13       this.say= function() {
14         alert('我是快乐的小猴子，家住'+this.home)
15       };
16     }
17 
18     function Hero(_HP){
19       this.HP=_HP;
20     }
21 
22     function Magic_monkey(_type,_home,arr,_HP){
23       //Monkey.call(this,_type,_home)
24       Monkey.apply(this,[_type,_home])
25       Hero.call(this,_HP)
26       this.skill=arr;
27     }
28     var wukong=new Magic_monkey('猴子','花果山',['七十二变','筋斗云'],1000)
29     // alert(wukong.home);
30     // alert(wukong.type);
31     // alert(wukong.skill);
32     alert(wukong.HP);
33     wukong.say();
34     */
35     //原型链继承
36     function Monkey(){}
37     Monkey.prototype.type='猴子';
38     Monkey.prototype.say=function(){alert('我是快乐的猴子')}
39 
40     function Magicmonkey(){}
41     //将Magicmonkey的prototype对象指向一个Monkey的实例。
42     //相当于删除了prototype 对象原先的值，然后赋予一个新值。
43     //不能继承多个类，后边的会覆盖前边的
44     Magicmonkey.prototype=new Monkey();
45     Magicmonkey.prototype.skill='法术';
46     var sunWukong=new Magicmonkey()
47     alert(sunWukong.type)
48     sunWukong.say()
49     alert(sunWukong.skill)
50 
51   </script>
52 </body>
53 </html>