摘要:首先要说明:JS并没有类(class)的概念,虽然说ES6开始有了类的概念,但是,ES6中的类,仅仅只是基于现有的原型继承的一种语法糖。

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-有关JS”类“的继承的必知必会基础知识介绍

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

首先要说明:JS并没有类(class)的概念,虽然说ES6开始有了类的概念,但是,ES6中的类,仅仅只是基于现有的原型继承的一种语法糖。

一、面向对象思想

在这里我就只说说关于面向对象的一些基本知识:

:定义某一事物的抽象特点,具有属性和方法。简单的理解来说:类好比一个黑盒子,你不需要知道里面的功能,就可以使用它。举个栗子:一台空调,你只需要知道上面的按钮有什么用,就可以使用这台空调,完全不需要知道这台空调里面到底是怎么工作的。对象:类的一个实例。例如:var myDate = new Date(); //myDate就是通过new关键字,创建的一个对象。它就是系统中的"类":Date()的一个实例;属性:对象的特征;方法:对象的行为;封装性:只有特定类的对象才能访问特定类的成员;继承性:子类继承父类的属性和方法;多态性:不同的类可以定义相同的属性和方法;抽象性:(就是类这个概念很抽象咯,/滑稽)

二、类的属性和方法的继承

纠正一下:由于JS并没有类(class)的概念,更多的时候我们把它叫做对象(function),然后把对象叫做实例(instance)。出去和别人讨论oop时,一定要叫对一些概念的名字,免得贻笑大方。

在这里我就直接用类(class)这个叫法。

1、属性的继承:

1.先来看一个小例子:

 function show() {     alert(this); } show();  //[object window]    //很显然输出window对象

2.再来看一下:

 function show() {     alert(this); } show.call(123);  //123

这是因为函数调用call()方法时,第一个参数会覆盖函数中的this。也就是说,这里123把this覆盖了。这是call()方法的一个用法。

有关call()的详尽使用大家可以自行百度,这里就不介绍了。

3.继续介绍,刚步入正题:

 function A() {     this.aaa = 111; } var objA = new A(); alert(objA.aaa);  //111

通过类: A 创建一个对象: objA ,所以对象: objA 就具有了aaa这个属性。

4.终于说到继承属性了:

 function A() {     this.aaa = 111; } function B() {     A.call(this); } var objB = new B();                alert(objB.aaa);  //111    //实现继承属性

解释一下:通过类: B 创建对象: objB 后,类: B中的this指向objB,这时候A.call(this)就相当于A.call(objB),正如前面所说,objB会覆盖类: A 中的this,所以objB就具有了aaa属性,所以就实现了属性的继承。

2、方法的继承:

1.简单的写法:

 function A() {} function B() {}  A.prototype.showA = function () {     alert('aaa');   };  B.prototype = A.prototype;  var objA = new A(); var objB = new B();  objB.showA();  //aaa    //证明 B 确实继承了 A 的方法

但是这种方法虽然简单,但是有个很大的缺陷,实际上:B.prototype 是对 A.prototype 的引用。

下面我们来证明这一点:在上述代码 B.prototype = A.prototype; 这行代码后面添加:

 B.prototype.showB = function () {     alert('bbb'); };

然后 objA.showB(); //bbb //这就证明,B.prototype确实是对A.prototype的引用。

2.避免引用

 function A() {} function B() {}  A.prototype.showA = function () {     alert('aaa'); };  //用for...in...循环,将A的属性一一赋给B,这样就不会造成B.prototype对A.prototype引用 for (let i in A.prototype) {     B.prototype[i] = A.prototype[i]; }    B.prototype.showB = function () {     alert('bbb'); };    var objA = new A(); var objB = new B();  objB.showA();  //aaa    //证明B继承了A的方法 objA.showB();  //error    //证明A上并没有showB方法,说明A没有被引用

首先要说明:JS并没有类(class)的概念,虽然说ES6开始有了类的概念,但是,ES6中的类,仅仅只是基于现有的原型继承的一种语法糖。

一、面向对象思想

在这里我就只说说关于面向对象的一些基本知识:

:定义某一事物的抽象特点,具有属性和方法。简单的理解来说:类好比一个黑盒子,你不需要知道里面的功能,就可以使用它。举个栗子:一台空调,你只需要知道上面的按钮有什么用,就可以使用这台空调,完全不需要知道这台空调里面到底是怎么工作的。对象:类的一个实例。例如:var myDate = new Date(); //myDate就是通过new关键字,创建的一个对象。它就是系统中的"类":Date()的一个实例;属性:对象的特征;方法:对象的行为;封装性:只有特定类的对象才能访问特定类的成员;继承性:子类继承父类的属性和方法;多态性:不同的类可以定义相同的属性和方法;抽象性:(就是类这个概念很抽象咯,/滑稽)

二、类的属性和方法的继承

纠正一下:由于JS并没有类(class)的概念,更多的时候我们把它叫做对象(function),然后把对象叫做实例(instance)。出去和别人讨论oop时,一定要叫对一些概念的名字,免得贻笑大方。

在这里我就直接用类(class)这个叫法。

1、属性的继承:

1.先来看一个小例子:

 function show() {     alert(this); } show();  //[object window]    //很显然输出window对象

2.再来看一下:

 function show() {     alert(this); } show.call(123);  //123

这是因为函数调用call()方法时,第一个参数会覆盖函数中的this。也就是说,这里123把this覆盖了。这是call()方法的一个用法。

有关call()的详尽使用大家可以自行百度,这里就不介绍了。

3.继续介绍,刚步入正题:

 function A() {     this.aaa = 111; } var objA = new A(); alert(objA.aaa);  //111

通过类: A 创建一个对象: objA ,所以对象: objA 就具有了aaa这个属性。

4.终于说到继承属性了:

 function A() {     this.aaa = 111; } function B() {     A.call(this); } var objB = new B();                alert(objB.aaa);  //111    //实现继承属性

解释一下:通过类: B 创建对象: objB 后,类: B中的this指向objB,这时候A.call(this)就相当于A.call(objB),正如前面所说,objB会覆盖类: A 中的this,所以objB就具有了aaa属性,所以就实现了属性的继承。

2、方法的继承:

1.简单的写法:

 function A() {} function B() {}  A.prototype.showA = function () {     alert('aaa');   };  B.prototype = A.prototype;  var objA = new A(); var objB = new B();  objB.showA();  //aaa    //证明 B 确实继承了 A 的方法

但是这种方法虽然简单,但是有个很大的缺陷,实际上:B.prototype 是对 A.prototype 的引用。

下面我们来证明这一点:在上述代码 B.prototype = A.prototype; 这行代码后面添加:

 B.prototype.showB = function () {     alert('bbb'); };

然后 objA.showB(); //bbb //这就证明,B.prototype确实是对A.prototype的引用。

2.避免引用

 function A() {} function B() {}  A.prototype.showA = function () {     alert('aaa'); };  //用for...in...循环,将A的属性一一赋给B,这样就不会造成B.prototype对A.prototype引用 for (let i in A.prototype) {     B.prototype[i] = A.prototype[i]; }    B.prototype.showB = function () {     alert('bbb'); };    var objA = new A(); var objB = new B();  objB.showA();  //aaa    //证明B继承了A的方法 objA.showB();  //error    //证明A上并没有showB方法,说明A没有被引用

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-有关JS”类“的继承的必知必会基础知识介绍

全部内容,希望文章能够帮你解决

js实例教程-有关JS”类“的继承的必知必会基础知识介绍

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过