摘要:在中每個函數都包含兩個非繼承而來的方法和和的作用都是在特定的作用域中將函數綁定到另外一個對象上去運行,即可以用來重新定義函數的執行環境,兩者僅在定義參數方式上有所區別它們接收參數方面不同和的第一個參數都是需要調用的函數對象,在函數體內這個參
在js中每個函數都包含兩個非繼承而來的方法:call()和apply()
call和apply的作用都是在特定的作用域中將函數綁定到另外一個對象上去運行,即可以用來重新定義函數的執行環境,兩者僅在定義參數方式上有所區別
它們接收參數方面不同:call和apply的第一個參數都是需要調用的函數對象,在函數體內這個參數就是this的值,剩余的參數是需要傳遞給函數的值,call與apply的不同就是call傳的值可以是任意的,而apply傳的剩余值必須為數組
call方法
語法:
Function.call(obj,param1,param2...)
obj:這個對象將替代Function類里的this對象
params:這是一個參數列表
注意: 調用call的對象必須是一個函數對象,因為 call這個方法是在Function的prototype里的
定義:
調用一個對象的一個方法,以另一個對象替換當前對象
關于call的定義很拗口。我的理解:a.call(b,arg1,arg2..)就是a對象的方法應用到b對象上
function add(a,b){
alert(a+b);
}
function reduce(a,b){
alert(a-b);
}
add.call(reduce,1,3) //將add方法運用到reduce,結果為4
這個例子中的意思就是用 add 來替換 reduce,add.call(reduce,3,1) == add(3,1) ,所以運行結果為:alert(4); // 注意:js中的函數其實是對象,函數名是對 Function 對象的引用
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //Hello diz song glad to meet you!
HelloName.apply(myObject); //Hello my Object glad to meet you!
在例子中,我們發現apply()和call()的真正用法是能夠擴充函數賴以運行的作用域,如果我們想用傳統的方法實現,請見下面的代碼:
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!
我們發現,要想讓HelloName()函數的作用域在對象myObject上,我們需要動態創建myObject的HelloName屬性,此屬性作為指針指向HelloName()函數,這樣,當我們調用myObject.HelloName()時,函數內部的this變量就指向myObject,也就可以調用該對象的內部其他公共屬性了
call可以改變this指向
function Animal(){
this.name=”animal”; this.showName=function(){ alert(this.name) }
}
function Cat(){
this.name=”cat”;
}
var animal = new Animal();
var cat = new Cat();
animal.showName(); //結果為animal
animal.showName.call(cat); //通過call方法將原本屬于Animal對象的showName()方法交給對象cat來使用,輸入結果為"Cat"
call 的意思是把 animal 的方法放到cat上執行,原來cat是沒有showName() 方法,現在是把animal 的showName()方法放到 cat上來執行,所以this.name 應該是 Cat
bind()方法
支持此方法的瀏覽器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它屬于ECMAScript5的方法:
window.color = "red";
var o = { color: "blue" };
function sayColor(){
console.log(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue
這里,sayColor()調用bind()方法,并傳入o對象,返回了OSayColor()函數,在OSayColor()中,this的值就為o對象
實現繼承
function Animal(name){
this.name=name; this.showName=function(){ alert(this.name) }
}
function Cat(name){
Animal.call(this,name);
}
var cat = new Cat(“Black Cat”);
cat.showName(); //瀏覽器彈出Black Cat
Animal.call(this) 的意思就是使用 Animal對象代替this對象,那么 Cat中不就有Animal的所有屬性和方法了嗎,Cat對象就能夠直接調用Animal的方法以及屬性了
多重繼承
function s1(name){
this.name = name;
}
var s2 = function(sex){
this.sex = sex;
}
var s3 = function(age){
this.age = age;
}
var Student = function(name,sex,age,score){
s1.call(this,name); s2.call(this,sex); s3.call(this,age); this.score = score;
}
Student.prototype.construction = Student;
var s = new Student("jack","male","12","100");
console.log(s.name); //輸出:jack
console.log(s.sex); //輸出:male
console.log(s.age); //輸出:12
console.log(s.score);//輸出:100
很簡單,使用兩個 call 就實現多重繼承了。當然,js的繼承還有其他方法,例如使用原型鏈
當然還有 apply,這兩個方法基本上是一個意思,區別在于 call 的第二個參數可以是任意類型,而apply的第二個參數必須是數組,也可以是arguments
還有 callee,caller..
apply方法:
語法:
Function.apply(obj,args)
obj:這個對象將代替Function類里this對象(就是定義函數代碼塊里面的this)
args:這個是數組,它將作為參數傳給Function(args-->arguments),這個可以是數組也可以是 arguments
定義:
應用某一對象的一個方法,用另一個對象替換當前對象。
什么情況下用apply,什么情況下用call
在給對象參數的情況下,如果參數的形式是數組,比如apply示例里面傳遞了參數arguments,這個參數是數組類型,并且在調用Animal的時候參數的列表是對應一致的(也就是Animal和Cat的參數列表前兩位是一致的) 就可以采用 apply , 如果我的Animal的參數列表是這樣的(age,name),而Cat的參數列表是(name,age,kind),這樣就可以用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,kind));
apply的一些其他巧妙用法:
apply可以將一個數組默默的解析成一個一個的參數,可以將一個數組默認的轉換為一個參數列表([param1,param2,param3] 轉換為 param1,param2,param3) ,利用aplly這個特點我們就可以用在一些針對字符串操作的方法了:例如
1.Math.max 可以實現得到數組中最大的一項
因為Math.max 參數里面不支持Math.max([param1,param2]) 也就是數組,但是它支持Math.max(param1,param2,param3…),所以可以根據剛才apply的那個特點來解決
var max=Math.max.apply(null,array),這樣輕易的可以得到一個數組中最大的一項 (apply會將一個數組裝換為一個參數接一個參數的傳遞給方法) 這塊在調用的時候第一個參數給了一個null,這個是因為沒有對象去調用這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去(利用Math方法但是不改變this的指向)
2.Math.max 可以實現得到數組中最小的一項
和 max是一個原理 var min=Math.min.apply(null,array)
3.Array.prototype.push 可以實現兩個數組合并
arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102650.html
摘要:輸出的作用與和一樣,都是可以改變函數運行時上下文,區別是和在調用函數之后會立即執行,而方法調用并改變函數運行時上下文后,返回一個新的函數,供我們需要時再調用。 前言 js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改變函數運行時上下文,最終的返回值是你調用的方法的返回值,若該方法沒有返回值,則返回undefined。這幾個方法...
摘要:最近在學習的表格排序,沒想到看不起眼的表格排序實際上卻暗含了眾多知識點。二實現表格排序使用獲取數據之所以使用動態獲取數據,是為了使用文檔碎片綁定數據。 最近在學習js的表格排序,沒想到看不起眼的表格排序實際上卻暗含了眾多JS知識點。在這里記錄一下此次學習過程。希望對大家也有所幫助。 完整的表格排序涉及了下列這些知識點: call方法使用 sort方法深入 數據綁定 DOM映射 下面...
摘要:最近在學習的表格排序,沒想到看不起眼的表格排序實際上卻暗含了眾多知識點。二實現表格排序使用獲取數據之所以使用動態獲取數據,是為了使用文檔碎片綁定數據。 最近在學習js的表格排序,沒想到看不起眼的表格排序實際上卻暗含了眾多JS知識點。在這里記錄一下此次學習過程。希望對大家也有所幫助。 完整的表格排序涉及了下列這些知識點: call方法使用 sort方法深入 數據綁定 DOM映射 下面...
摘要:用的比較多的,通過選擇的節點是一種類似的。它不能應用下的等方法。和都是為了改變某個函數運行時的即上下文而存在的,換句話說,就是為了改變函數體內部的指向。這些的話也就能明白它倆的用處以及它們定義。 要明白call以及apply 首先得知道他們的用法如何有什么用 function cat() {} cat.prototype = { foo...
總結call,apply,bind方法的理解使用和區別。 call,apply,bind這三個方法在JavaScript中是用來改變函數調用的this指向。那么改變函數this指向有什么用呢?我們先來看一段代碼 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...
閱讀 3061·2021-11-23 09:51
閱讀 1040·2021-09-02 15:21
閱讀 3005·2019-08-30 13:56
閱讀 1828·2019-08-29 14:12
閱讀 707·2019-08-29 13:53
閱讀 1664·2019-08-29 11:32
閱讀 1325·2019-08-29 11:25
閱讀 1492·2019-08-28 17:51