js中的call()方法的使用例項
阿新 • • 發佈：2019-02-13
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>call方法</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <script> $(document).ready(function(){ }) $().ready(function(){ //do something }) //參考：http://uule.iteye.com/blog/1158829 $(function(){ //------------1.常例-------------- function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1);//4 //---------------常例（1）-------------------- function add1(a,b) { //this(a,b); alert(a+b); } function sub1(a,b) { this(a,b); alert(a-b); } add1.call(sub1,3,1); //彈出4 //---------------常例（2）-------------------- function add2(a,b) { this(a,b); alert(a+b); } function sub2(a,b) { // this(a,b); alert(a-b); } add2.call(sub2,3,1); //依次彈出2和4，add2的this被替換指向sub2 //----------2.------------------------- function Animal(){ this.name = "Animal"; this.showName = function(){ alert(this.name); } } function Cat(){ this.name = "Cat"; } var animal = new Animal(); var cat = new Cat(); //通過call或apply方法，將原本屬於Animal物件的showName()方法交給物件cat來使用了。 animal.showName.call(cat,",fw45tg354,'"); //Cat,此處call方法的第二個引數字串可為任意的輸出結果認為Cat //animal.showName.apply(cat,[]);//Cat //----------------3.實現繼承----------------------------- function Animal1(name){ this.name = name; this.showName = function(){ alert(this.name); } } function Cat1(name){ Animal1.call(this, name); } // Cat1.prototype = new Animal1(); var cat1 = new Cat1("Black Cat"); cat1.showName();//Black Cat alert("是此型別？："+cat1 instanceof Animal1); //false //-----------4.多重繼承---------------------------- function Class10() { this.showSub = function(a,b) { alert(a-b); } } function Class11() { this.showAdd = function(a,b) { alert(a+b); } } function Class2() { Class10.call(this); Class11.call(this,6,2); } var c2 = new Class2(); c2.showSub(8,3);//5 c2.showAdd(6,2);//8 }) //---------5.使用call方法呼叫匿名函式--------------------- var animals = [ {species: 'Lion', name: 'King'}, {species: 'Whale', name: 'Fail'} ]; for (var i = 0; i < animals.length; i++) { (function (i) { this.print = function () { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); //#0 Lion: King //#1 Whale: Fail } //---------6.使用call方法呼叫函式並且指定上下文的'this'------------- //在下面的例子中，當呼叫 greet 方法的時候，該方法的 this 值會繫結到 i 物件。 function greet() { var reply = [this.person, 'Is An Awesome', this.role].join(' '); console.log(reply); } var i = { person: 'Douglas Crockford', role: 'Javascript Developer' }; greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer </script> </body> </html>