有关JS”类“的继承的必知必会基础知识介绍
程序员文章站
2022-04-28 21:26:10
首先要说明:js并没有类(class)的概念,虽然说es6开始有了类的概念,但是,es6中的类,仅仅只是基于现有的原型继承的一种语法糖。
一、面向对象思想
在这里我就只说说关于...
首先要说明: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没有被引用