js高程(二)-----继承

首先来讨论一下原型链，上代码

 1 function SuperType(){
 2     this.property = true;
 3   }
 4
 5   SuperType.prototype.getSuperValue = function(){
 6     console.log(this.property);
 7   }
 8
 9   function SubType(){
10     this.subproperty = false;
11   }
12
13   SubType.prototype = new SuperType();
14
15   SubType.prototype.getSubValue = function(){
16     console.log(this.subproperty);
17   }
18
19   var instance = new SubType();
20
21   console.log(instance.getSuperValue());//true

前三行创建了一个名为SuperType的构造器，并为其添加了一个属性propertype，其值设为true，然后在SuperType的原型上添加方法getSuperValue，功能是输出属性property的值，第一个构造函数完毕。9到11行创建第二个构造函数并添加属性subproperty，其值设为false。重点部分：第13行，把一个SuperType的实例赋值给SubType的原型。后面同样为SubType的原型添加一个方法。然后创建一个Subtype的实例，调用getSuperValue方法，返回true。

下面来仔细分析一下这条原型链，首先创造一个构造函数SuperType，它指向自己的原型，而原型的constructor有指向SuperType，这是第一部分，第二次创造了新的构造函数SubType，它的实例instance指向它的原型，而它的原型已经被设定为一个SuperType的实例，而这个实例又指向SuperType的原型，所以这部分和刚刚的第一部分就联系起来了，问题来了，instance。constructor是谁？沿着刚刚说的原型链向上找，

console.log(instance.constructor);//SuperType

同理，SuperType其实还能沿着原型链向上，上面就是Object。

第二种：借用构造函数，上代码：

 1 function SuperType(name){
 2     this.name = name;
 3   }
 4
 5   function SubType(){
 6     SuperType.call(this,"jiangjie");
 7     this.age = 20;
 8   }
 9
10   var instance = new SubType();
11
12   console.log(instance.name);//jiangjie
13   console.log(instance.age);//20
14
15   console.log(instance.constructor);//Subtype
16   console.log(Object.getPrototypeOf(instance)==SubType.prototype);//true
17
18   console.log(instance.hasOwnProperty("name"));//true

这样的写法就更容易理解了，使用call只是使用了Supertype的属性，但是并没有改动任何的原型链，我们可以使用hasOwnProperty来证明并不是调用了SuperType作为原型，

第三种：组合继承，上代码

 1 function SuperType(name){
 2     this.color = ['red','black','white'];
 3     this.name = name;
 4   }
 5
 6
 7   SuperType.prototype.sayName = function(){
 8     console.log(this.name);
 9   }
10
11   function SubType(name,age){
12     SuperType.call(this,name);
13     this.age = age;
14   }
15
16   SubType.prototype = new SuperType();
17
18   SubType.prototype.sayAge = function(){
19     console.log(this.age);
20   }
21
22   var instance1 = new SubType('jaingjie','20');
23   var instance2 = new SubType('lukexin','20');
24
25   instance1.color.push('green');
26   console.log(instance1.color);//['red','black','white','green'];
27   console.log(instance1.sayName());//jiangjie
28   console.log(instance1.sayAge());//20
29
30   console.log(instance2.color);//['red','black','white'];
31   console.log(instance2.sayName());//lukexin
32   console.log(instance2.sayAge());//20

说白了就是改进版，集中各个方法所长，使用借用构造函数方法，来设定各自实例属性，通过原型来设定通用的方法，但是要注意，为了确保构造函数不会重写子类的属性，要在调用超类型构造函数以后，再为子类添加属性

转载于:https://www.cnblogs.com/aichihuamei/p/6602037.html

js高程(二)-----继承相关推荐

js面试题继承的方法及优缺点解答
这篇文章主要为大家介绍了js面试题继承的方法及优缺点解答,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪目录说一说js继承的方法和优缺点? 一.原型链继承二.借用构造 ...
【前端知识之JS】JS如何实现继承
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍JS如何实现继承. 文章目录前言一.什么是继承二.实现方式 1. 原型链继承 2. 构造函数继承 3. 组合继承 4. 原型式继承 5. ...
对 js 高程 Preflighted Reqeusts 的理解
看JS高程遇到 Preflighted Reqeusts不大理解,遂百度下: 转自:http://todoit.me/ajax-preflight/ 最近在做一个 VUE 的项目的时候, 和后端的小伙 ...
C++继承机制(二)——继承中的构造和析构顺序、继承同名成员的处理方式
目录: C++继承机制(一)--基本语法.三种继承方式.继承哪些数据 C++继承机制(二)--继承中的构造和析构顺序.继承同名成员的处理方式 C++继承机制(三)--多继承.菱形继承.虚继承原理本篇 ...
llqrcode.js识别二维码，解析二维码信息
llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 直接上代码 <!DOCTYPE html> <html> <head>& ...
JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
【JavaSe】面向对象篇(五) 三大特征之二继承
JavaSe·面向对象篇(五) 三大特征之二继承 1. 面向对象三大特质之继承 1.1 由来多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那 ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
JS 生成二维码实现（qrcode.js）
qrcode.js源码地址: https://github.com/jeromeetienne/jquery-qrcode 使用页面引入QRCode.js和JQuery.js <script ...

js高程(二)-----继承

js高程(二)-----继承相关推荐

最新文章

热门文章