欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

有关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没有被引用