1. Object inheritance in js
There are three inheritance methods in js
1.js prototype (prototype) implements inheritance
Copy the code code as follows:
<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("Use prototype to get Name: "+this.name);
}
var per=new Person("Ma Xiaoqian",21);
per.sayHello(); //Output: Use the prototype to get Name: Ma Xiaoqian
function Student(){}
Student.prototype=new Person("Hong Rutong",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//Output: Use the prototype to get Name: Hong Rutong
stu.intr();//Output: 5
</script>
</body>
</html></SPAN></SPAN>
2. Constructor implements inheritance
Copy the code code as follows:
<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("Jiang Jianchen");
parent.sayParent(); //Output: "Parent: Jiang Jianchen"
var child=new Child("李明",24); //Output: "Child:李明age:24"
child.sayChild();
</script>
</body>
</html></SPAN>
3.call, apply to implement inheritance
Copy the code code as follows:
<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("Name:"+name);
}
}
//call method
function student(name,age){
Person.call(this,name,age);
}
//apply method
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //Same effect as the previous sentence, arguments
}
//Similarities and differences between call and aply:
//1, the first parameter this is the same, it refers to the current object
//2, the second parameter is different: call is a parameter list one by one; apply is an array (arguments can also be used)
var per=new Person("Wufenglou",25,"Wei Yingping"); //Output: "Wufenglou"
per.say();
var stu=new student("Cao Yu",18);//Output: "Cao Yu"
stu.say();
var tea=new teacher("Qin Jie",16);//Output: "Qin Jie"
tea.say();
</script>
</body>
</html></SPAN>
2. Usage of call and apply (detailed introduction)
Both call and apply in js can implement inheritance. The only parameter difference is that the apply writing method corresponding to func.call(func1,var1,var2,var3) is: func.apply(func1,[var1,var2,var3]).
The explanation of call in the JS manual:
Copy the code code as follows:
<SPAN style="FONT-SIZE: 18px">call method
Call a method on an object to replace the current object with another object.
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
parameter
thisObj
Optional. The object that will be used as the current object.
arg1, arg2, , argN
Optional. A sequence of method parameters will be passed.
illustrate
The call method can be used to call a method on behalf of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.
If the thisObj parameter is not provided, the Global object is used as thisObj. </SPAN>
To put it simply, the function of these two functions is actually to change the internal pointer of the object, that is, to change the content pointed to by this of the object. This is sometimes useful in object-oriented js programming. Let's take apply as an example to talk about the important role of these two functions in js. like:
Copy the code code as follows:
<SPAN style="FONT-SIZE: 18px"> function Person(name,age){ //Define a class
this.name=name; //name
this.age=age; //Age
this.sayhello=function(){alert(this.name)};
}
function Print(){ //Display class attributes
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //Student class
Person.apply(this,arguments); // Advantages over call
Print.apply(this,arguments);
this.grade=grade; //Grade
this.school=school; //school
}
var p1=new Person("Bu Kaihua",80);
p1.sayhello();
var s1=new Student("Bai Yunfei",40,9,"Yuelu Academy");
s1.show();
s1.sayhello();
alert(s1.funcName);</SPAN>
In addition, Function.apply() plays a prominent role in improving program performance:
Let’s start with the Math.max() function. Math.max can be followed by any number of parameters, and finally returns the maximum value among all parameters.
for example
Copy the code code as follows:
<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8)); //8
alert(Math.max(5,7,9,3,1,6)); //9
//But in many cases, we need to find the largest element in the array.
var arr=[5,7,9,1];
//alert(Math.max(arr)); // This doesn't work. NaN
//Write it like this
function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}
alert(getMax(arr)); //9
//Switch to apply, you can write like this
function getMax2(arr){
return Math.max.apply(null,arr);
}
alert(getMax2(arr)); //9
//The two pieces of code achieve the same purpose, but getMax2 is elegant, efficient, and much more concise.
//Another example is the push method of the array.
var arr1=[1,3,4];
var arr2=[3,4,5];
//If we want to expand arr2, then append to arr1 one by one, and finally let arr1=[1,3,4,3,4,5]
//arr1.push(arr2) obviously doesn't work. Because doing this will get [1,3,4,[3,4,5]]
//We can only use a loop to push one by one (of course you can also use arr1.concat(arr2), but the concat method does not change arr1 itself)
var arrLen=arr2.length;
for(var i=0;i<arrLen;i++){
arr1.push(arr2[i]);
}
//Since the introduction of Apply, things have become so simple
Array.prototype.push.apply(arr1,arr2); //Now arr1 is the desired result</SPAN>