What are the ways to implement inheritance in JS

This time I will show you what are the ways to implement inheritance in JS, and what are the precautions when implementing inheritance in JS. The following is a practical case, let's take a look.

We all know that the three major characteristics of Object-oriented are encapsulation, inheritance, and polymorphism. Encapsulation is nothing more than the privatization of properties and methods , so we provide private properties and private methods in JS. There is no polymorphism in JS, so we say that JS is an object-based language rather than an object-oriented language. So, among the three major characteristics of object-oriented, the most important one in JS is inheritance.

1. Basic concepts of inheritance

Using a subclass to inherit another parent class, the subclass can automatically have the properties and methods of the parent class.

>>>The two parties of inheritance occur between two classes.

Therefore, the so-called inheritance is nothing more than letting the subclass have all the attributes and methods of the parent class. So, in JS, we need to simulate this step, and there are three common methods to achieve it.

They are: extending Object's prototype to implement inheritance, using call and apply to implement inheritance, and using prototype to implement inheritance.

2. Extend Object’s prototype implementation inheritance

The essence of extending Object to realize inheritance is that we write a method ourselves to copy all the properties and methods of the parent class to the subclass one by one through a traversal loop.

The detailed steps are as follows:

1: Define the parent class

functionParent(){}

2: Define subclass

funtion Son(){}

3: Add an extension method to the

Object object through the prototype.

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通过for-in循环，把父类的所有属性方法，赋值给自己
this[i] =parObj[i];
}
}

4: Subclass object calls extension method

Son.customExtend(Parent);

3. Use call and apply to implement inheritance

First, to use this method to display inheritance, let’s review the functions of the call and apply functions:

call and apply: call the method through the function name and force this in the function to point to an object;

Call writing method: func.call(obj pointed to by this of func, parameter 1, parameter 2...);

Apply writing method: func.apply(obj pointed to by this of func, [parameter 1, parameter 2...]);

Then, our idea of ​​using these two functions to implement inheritance is: in the subclass, use the parent class function to call call or apply, and forcibly bind the this of the parent class to this of the subclass. In this case, wouldn't the attributes and methods bound to this of the parent class be successfully bound to this of the subclass?

The detailed steps are as follows:

1: Define the parent class

funtion Parent(){}

2: Define subclass

functionSon(){}

3: Call the parent class through the call method or apply method in the subclass.

functionSon(){
Parent.call(this,....);//将父类函数中的this，强行绑定为子类的this}

4. Use prototypes to implement inheritance

Using prototypes to implement inheritance is a relatively simple and easy-to-understand method. Just point the prototype of the subclass to the object of the parent class.

The detailed steps are as follows:

1: Define the parent class

functionParent(){}

2: Define subclass

functionSon(){}

3: Declare the prototype object in the subclass object as an instance of the parent class.

Son.prototype =newParent();

5. Closure

To understand closures, first, we need to understand the scope in JS:

1. Scope in JS

Global variables: variables declared outside the function

局部变量：函数内声明的变量

在JS中，函数为唯一的局部作用域，而if、for等其他{}没有自己的作用域

所以，函数外不能访问局部变量。其实，变量在函数执行完毕以后，占用的内存就会被释放。

2、闭包

在概述中，我刚刚提到，面向对象的三大特征中的“封装”，我们可以用函数的私有属性来实现。这个私有属性，其实也就是局部变量。

但是我们都知道，封装是限制外部的访问，并不是直接拒绝外部的访问，那么我们在函数中私有的属性，怎么才能在外部访问呢？答案就是闭包！

JS中，提供了一种"闭包"的概念：在函数内部，定义一个子函数，可以用子函数访问父函数的私有变量。执行完操作以后，将子函数通过return返回。

代码示例：

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();

3、闭包的作用：

① 访问函数的私有变量；

② 让函数的变量始终存在于内存中，而不被释放。

4、闭包的典型应用

我们来做这样一个功能：页面中有6个li，要求实现点击每个li，弹出这个li对应的序号。

HTML代码很简单：

那JS代码呢？我觉得很大一部分同学会这样写：

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/点击了第"+i+"个li！");
}

那么，这样对吗？不对！！！我们来分析一下：页面加载的时候，JS代码会全部执行，也就是上面的for循环在页面加载完就已经执行完了！那，这个i就已经变成了lis.length。也就是说，你在点击li的时候，无论点击第几个，弹出的都是lis.length。

那么，我们应该怎么修改呢？看代码！

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/点击了第"+j+"个li！");
}
}();
}

区别在哪？明眼人一眼就看穿我们在for循环外面嵌套了一层自执行函数！这种函数套函数的形式，就形成了闭包！

那作用呢？我们刚才强调，闭包的自执行函数会有自己的作用域。在函数里面的代码没有执行的时候，自执行函数中的j是不会被释放掉的！

也就是说，循环转了6次！生成了6个独立的函数空间，每个空间中有自己独立的j变量，所以最终不会出现所有li点击都是lis.length的情况！                         

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用jquery与ajax进行数据交互

echarts实现饼图扇区统计表的添加点击事件

JavaScript面向对象与this指向（附代码）

The above is the detailed content of What are the ways to implement inheritance in JS. For more information, please follow other related articles on the PHP Chinese website!