Of apply call prototype
- 2020-03-30 01:03:30
- OfStack
One, object inheritance in js
There are three ways of inheritance in js
1. Js prototype implementation inheritance
<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(" Using prototypes Name : "+this.name);
}
var per=new Person(" Cherry ma ",21);
per.sayHello(); //Output: use the prototype to get Name: ma xiaoqian & NBSP;
function Student(){}
Student.prototype=new Person(" HongRuTong ",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 & NBSP;
stu.intr();//Output: 5
</script>
</body>
</html></SPAN></SPAN>
2. Constructor implements inheritance
<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: jianchen" & NBSP;
var child=new Child(" Since li Ming ",24); //Output: "Child: li Ming age: 24" & NBSP;
child.sayChild();
</script>
</body>
</html></SPAN>
3. Call, apply implementation inheritance
<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 way
function student(name,age){
Person.call(this,name,age);
}
//The apply way
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); // The same effect as the sentence, arguments
}
//Similarities and differences between call and aplly: & NBSP;
//1, the first parameter this is the same, refers to the current object & NBSP;
//2. The second parameter is different: call is a parameter list; Apply is an array (arguments will also work) & NBSP;
var per=new Person(" Wu Feng floor ",25," Wei screen "); //Output: "wufeng building" & NBSP;
per.say();
var stu=new student(" Cao Yu ",18);//Output: "cao yu" & NBSP;
stu.say();
var tea=new teacher(" Qin Jie ",16);//Output: "qin jie" & NBSP;
tea.say();
</script>
</body>
</html></SPAN>
Ii. Usage of call and apply (detailed introduction)
In js, both call and apply can realize inheritance. The only parameter is different. The corresponding apply of func.call(func1,var1,var2,var3) is written as: func.apply(func1,[var1,var2,var3]).
Explanation of call in JS manual:
<SPAN style="FONT-SIZE: 18px">call methods
Calls a method on an object to replace the current object with another object.
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
parameter
thisObj
Optional. Will be used as the object of the current object.
arg1, arg2, , argN
Optional. A sequence of method parameters will be passed.
instructions
call Method can be used to call a method instead of another object. call Method to change the object context of a function from its original context thisObj The specified new object.
If not provided thisObj Parameter, so Global Objects are used as thisObj . </SPAN>
Simply put, what these two functions do is change the internal pointer to the object, that is, change the object's this point to. This is sometimes useful in object-oriented js programming. Let's take apply as an example and talk about the important role of these two functions in js. Such as:
<SPAN style="FONT-SIZE: 18px"> function Person(name,age){ //Define a class & NBSP;
this.name=name; //Name
this.age=age; //Age
this.sayhello=function(){alert(this.name)};
}
function Print(){ //Shows the property of the class & NBSP;
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){ //The student class
Person.apply(this,arguments);//Superior to call & NBSP;
Print.apply(this,arguments);
this.grade=grade; //Grade
this.school=school; //School
}
var p1=new Person(" ABU civilized ",80);
p1.sayhello();
var s1=new Student(" sikong ",40,9," Yuelu academy ");
s1.show();
s1.sayhello();
alert(s1.funcName);</SPAN>
In addition, function.apply () has a prominent role in improving program performance:
Let's start with the math.max () function, which can be followed by any argument and returns the maximum of all arguments.
Such as
<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 is not the case. NaN
//Write it like this & NBSP;
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
//Instead of apply, you could write & NBSP;
function getMax2(arr){
return Math.max.apply(null,arr);
}
alert(getMax2(arr)); //9
//Both pieces of code serve the same purpose, but getMax2 is elegant, efficient, and much simpler.
//Or the push method of an array.
var arr1=[1,3,4];
var arr2=[3,4,5];
//If we were to expand arr2 and append it one by one to arr1, then arr1=[1,3,4,3,4,5]& NBSP;
//Arr1. Push (arr2) obviously doesn't work. Because doing so results in [1,3,4,[3,4,5]]& NBSP;
//We can only use a loop to push one by one (of course, we 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]);
}
//Ever since the advent of Apply, things have been so simple & NBSP;
Array.prototype.push.apply(arr1,arr2); //Now arr1 is the desired result. / SPAN>