JavaScript inheritance is carefully divided into many types and implementation methods in many books. There are generally two types: object impersonation and prototype method. These two methods have their own advantages and disadvantages. I will list them here first, and then analyze the differences from the bottom level
After learning the creation of Javascript classes and objects, now I will summarize the implementation of the Javascript inheritance mechanism. Javascript does not have a strict and clear definition of the inheritance mechanism like Java. Its implementation is very loose just like the way its variables are used. You can design your own method to "imitate" the implementation of the inheritance mechanism. There are several methods:
1. Object impersonation
<script type="text/javascript"> function classA(str){ this.str=str; this.printstr=function(){ document.write(this.str); document.write("<br>"); } this.getstr=function(){ return this.str; } } function classB(name,str){ //下面这两句代码相当于将classA代码体中的内容搬到这里 this.newMethod1=classA; this.newMethod1(str); //注意,这里的写法 delete this.newMethod1; //新的方法和属性的定义须在删除了newMethod之后定义,因为可能覆盖超类的属性和方法。 this.name=name; this.sayName=function(){ document.write(this.name); document.write("<br>"); } } var a=new classB("Amy","helloworld"); a.printstr(); alert(a.getstr()); a.sayName(); </script>
The code block defined by function is equivalent to a class. You can use It has the this keyword. You can use this to add properties and methods to it. There are the following two sentences in the above code:
this.newMethod1=classA;
this.newMethod1(str);
The newMethod1 variable is defined in classB. It is a reference, points to classA, and also calls classA. The function of these two lines of code is equivalent to directly copying the contents of the classA code block here. The classB created in this way Of course the object has the properties and methods of classA. Object impersonation can also achieve multiple inheritance, as follows:
function ClassZ() { this.newMethod = ClassX; this.newMethod(); delete this.newMethod; this.newMethod = ClassY; this.newMethod(); delete this.newMethod; }
However, classY will overwrite the properties and methods of the same name in classX. If the design is OK, classz will also Different classes with the same properties and methods should not be inherited.
2. Use the call() method
<script type="text/javascript"> function classA(str){ this.str=str; this.printstr=function(){ document.write(this.str); document.write("<br>"); } this.getstr=function(){ return this.str; } } function classB(name,str){ //利用call方法实现继承 classA.call(this,str); this.name=name; this.sayName=function(){ document.write(this.name); document.write("<br>"); } } var a=new classB("Amy","helloworld"); a.printstr(); alert(a.getstr()); a.sayName(); </script>
The first parameter in the call() method passes an object, where this refers to is the current object, and the following parameters (there may be multiple) refer to the parameters required to be passed to the class (function) that calls the call() method. classA.call() is also equivalent to directly copying the content in the classA code block. At this point, objects of classB can also directly use variables and methods in classB.
3. Prototype chain
<script type="text/javascript"> function cA(){}; cA.prototype.name="John"; cA.prototype.sayName=function(){ document.write(this.name); document.write("<br>"); } function cB(){}; cB.prototype=new cA(); cB.prototype.age=23; cB.prototype.sayAge=function(){ document.write(this.age); document.write("<br>"); } var objB=new cB(); objB.sayAge(); objB.sayName(); document.write("is objB the instance of cA "+(objB instanceof cA)); document.write("<br>"); document.write("is objB the instance of cB "+(objB instanceof cB)); document.write("<br>"); </script>
The prototype keyword is used to define the class here. There are no parameters when defining the function, followed by prototype. The variables or methods are equivalent to the properties and methods modified by static in Java, which belong to all objects. There is a special feature here: cB.prototype=new cA(); This sentence is equivalent to copying the content of the cA object to cB, cB can also add its own properties and methods.
4. Mixed method
<script type="text/javascript"> function cA(name){ this.name=name; }; cA.prototype.sayName=function(){ document.write(this.name); document.write("<br>"); } function cB(name,age){ cA.call(this,name); this.age=age; }; cB.prototype=new cA(); cB.prototype.sayAge=function(){ document.write(this.age); document.write("<br>"); } var objB=new cB("Alan",27); objB.sayName(); objB.sayAge(); document.write("is objB the instance of cA "+(objB instanceof cA)); document.write("<br>"); document.write("is objB the instance of cB "+(objB instanceof cB)); document.write("<br>"); </script>
Here you can encapsulate the attributes in the class body, and the method is defined using the prototype method. Personally, this is A good design method is to use functions defined by prototype to reuse multiple objects. Two points need to be noted here: there is cA.call(this,name) in the cB class body; at the same time, the cB prototype must be assigned to the cB object, that is :cB.prototype=new cA();cA.call(this,name) is also equivalent to copying the code in the cA class block here. The following sentence adds the method of cA to cB, and cB can also append itself. properties and methods.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed example of interaction between Servlet3.0 and JS through Ajax
##Native JS encapsulation fade effect function Detailed explanation of steps
p5.jsSummary of keyboard interaction functions
The above is the detailed content of Javascript inheritance mechanism (detailed answers, graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version
Recommended: Win version, supports code prompts!

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SublimeText3 Linux new version
SublimeText3 Linux latest version
