摘要:在中每個函數(shù)都包含兩個非繼承而來的方法和和的作用都是在特定的作用域中將函數(shù)綁定到另外一個對象上去運(yùn)行,即可以用來重新定義函數(shù)的執(zhí)行環(huán)境,兩者僅在定義參數(shù)方式上有所區(qū)別它們接收參數(shù)方面不同和的第一個參數(shù)都是需要調(diào)用的函數(shù)對象,在函數(shù)體內(nèi)這個參
在js中每個函數(shù)都包含兩個非繼承而來的方法:call()和apply()
call和apply的作用都是在特定的作用域中將函數(shù)綁定到另外一個對象上去運(yùn)行,即可以用來重新定義函數(shù)的執(zhí)行環(huán)境,兩者僅在定義參數(shù)方式上有所區(qū)別
它們接收參數(shù)方面不同:call和apply的第一個參數(shù)都是需要調(diào)用的函數(shù)對象,在函數(shù)體內(nèi)這個參數(shù)就是this的值,剩余的參數(shù)是需要傳遞給函數(shù)的值,call與apply的不同就是call傳的值可以是任意的,而apply傳的剩余值必須為數(shù)組
call方法
語法:
Function.call(obj,param1,param2...)
obj:這個對象將替代Function類里的this對象
params:這是一個參數(shù)列表
注意: 調(diào)用call的對象必須是一個函數(shù)對象,因為 call這個方法是在Function的prototype里的
定義:
調(diào)用一個對象的一個方法,以另一個對象替換當(dāng)前對象
關(guān)于call的定義很拗口。我的理解:a.call(b,arg1,arg2..)就是a對象的方法應(yīng)用到b對象上
function add(a,b){
alert(a+b);
}
function reduce(a,b){
alert(a-b);
}
add.call(reduce,1,3) //將add方法運(yùn)用到reduce,結(jié)果為4
這個例子中的意思就是用 add 來替換 reduce,add.call(reduce,3,1) == add(3,1) ,所以運(yùn)行結(jié)果為:alert(4); // 注意:js中的函數(shù)其實是對象,函數(shù)名是對 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!
在例子中,我們發(fā)現(xiàn)apply()和call()的真正用法是能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域,如果我們想用傳統(tǒng)的方法實現(xiàn),請見下面的代碼:
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!
我們發(fā)現(xiàn),要想讓HelloName()函數(shù)的作用域在對象myObject上,我們需要動態(tài)創(chuàng)建myObject的HelloName屬性,此屬性作為指針指向HelloName()函數(shù),這樣,當(dāng)我們調(diào)用myObject.HelloName()時,函數(shù)內(nèi)部的this變量就指向myObject,也就可以調(diào)用該對象的內(nèi)部其他公共屬性了
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(); //結(jié)果為animal
animal.showName.call(cat); //通過call方法將原本屬于Animal對象的showName()方法交給對象cat來使用,輸入結(jié)果為"Cat"
call 的意思是把 animal 的方法放到cat上執(zhí)行,原來cat是沒有showName() 方法,現(xiàn)在是把a(bǔ)nimal 的showName()方法放到 cat上來執(zhí)行,所以this.name 應(yīng)該是 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()調(diào)用bind()方法,并傳入o對象,返回了OSayColor()函數(shù),在OSayColor()中,this的值就為o對象
實現(xiàn)繼承
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對象就能夠直接調(diào)用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 就實現(xiàn)多重繼承了。當(dāng)然,js的繼承還有其他方法,例如使用原型鏈
當(dāng)然還有 apply,這兩個方法基本上是一個意思,區(qū)別在于 call 的第二個參數(shù)可以是任意類型,而apply的第二個參數(shù)必須是數(shù)組,也可以是arguments
還有 callee,caller..
apply方法:
語法:
Function.apply(obj,args)
obj:這個對象將代替Function類里this對象(就是定義函數(shù)代碼塊里面的this)
args:這個是數(shù)組,它將作為參數(shù)傳給Function(args-->arguments),這個可以是數(shù)組也可以是 arguments
定義:
應(yīng)用某一對象的一個方法,用另一個對象替換當(dāng)前對象。
什么情況下用apply,什么情況下用call
在給對象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組,比如apply示例里面?zhèn)鬟f了參數(shù)arguments,這個參數(shù)是數(shù)組類型,并且在調(diào)用Animal的時候參數(shù)的列表是對應(yīng)一致的(也就是Animal和Cat的參數(shù)列表前兩位是一致的) 就可以采用 apply , 如果我的Animal的參數(shù)列表是這樣的(age,name),而Cat的參數(shù)列表是(name,age,kind),這樣就可以用call來實現(xiàn)了,也就是直接指定參數(shù)列表對應(yīng)值的位置(Person.call(this,age,name,kind));
apply的一些其他巧妙用法:
apply可以將一個數(shù)組默默的解析成一個一個的參數(shù),可以將一個數(shù)組默認(rèn)的轉(zhuǎn)換為一個參數(shù)列表([param1,param2,param3] 轉(zhuǎn)換為 param1,param2,param3) ,利用aplly這個特點我們就可以用在一些針對字符串操作的方法了:例如
1.Math.max 可以實現(xiàn)得到數(shù)組中最大的一項
因為Math.max 參數(shù)里面不支持Math.max([param1,param2]) 也就是數(shù)組,但是它支持Math.max(param1,param2,param3…),所以可以根據(jù)剛才apply的那個特點來解決
var max=Math.max.apply(null,array),這樣輕易的可以得到一個數(shù)組中最大的一項 (apply會將一個數(shù)組裝換為一個參數(shù)接一個參數(shù)的傳遞給方法) 這塊在調(diào)用的時候第一個參數(shù)給了一個null,這個是因為沒有對象去調(diào)用這個方法,我只需要用這個方法幫我運(yùn)算,得到返回的結(jié)果就行,.所以直接傳遞了一個null過去(利用Math方法但是不改變this的指向)
2.Math.max 可以實現(xiàn)得到數(shù)組中最小的一項
和 max是一個原理 var min=Math.min.apply(null,array)
3.Array.prototype.push 可以實現(xiàn)兩個數(shù)組合并
arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102650.html
摘要:輸出的作用與和一樣,都是可以改變函數(shù)運(yùn)行時上下文,區(qū)別是和在調(diào)用函數(shù)之后會立即執(zhí)行,而方法調(diào)用并改變函數(shù)運(yùn)行時上下文后,返回一個新的函數(shù),供我們需要時再調(diào)用。 前言 js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改變函數(shù)運(yùn)行時上下文,最終的返回值是你調(diào)用的方法的返回值,若該方法沒有返回值,則返回undefined。這幾個方法...
摘要:最近在學(xué)習(xí)的表格排序,沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多知識點。二實現(xiàn)表格排序使用獲取數(shù)據(jù)之所以使用動態(tài)獲取數(shù)據(jù),是為了使用文檔碎片綁定數(shù)據(jù)。 最近在學(xué)習(xí)js的表格排序,沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多JS知識點。在這里記錄一下此次學(xué)習(xí)過程。希望對大家也有所幫助。 完整的表格排序涉及了下列這些知識點: call方法使用 sort方法深入 數(shù)據(jù)綁定 DOM映射 下面...
摘要:最近在學(xué)習(xí)的表格排序,沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多知識點。二實現(xiàn)表格排序使用獲取數(shù)據(jù)之所以使用動態(tài)獲取數(shù)據(jù),是為了使用文檔碎片綁定數(shù)據(jù)。 最近在學(xué)習(xí)js的表格排序,沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多JS知識點。在這里記錄一下此次學(xué)習(xí)過程。希望對大家也有所幫助。 完整的表格排序涉及了下列這些知識點: call方法使用 sort方法深入 數(shù)據(jù)綁定 DOM映射 下面...
摘要:用的比較多的,通過選擇的節(jié)點是一種類似的。它不能應(yīng)用下的等方法。和都是為了改變某個函數(shù)運(yùn)行時的即上下文而存在的,換句話說,就是為了改變函數(shù)體內(nèi)部的指向。這些的話也就能明白它倆的用處以及它們定義。 要明白call以及apply 首先得知道他們的用法如何有什么用 function cat() {} cat.prototype = { foo...
總結(jié)call,apply,bind方法的理解使用和區(qū)別。 call,apply,bind這三個方法在JavaScript中是用來改變函數(shù)調(diào)用的this指向。那么改變函數(shù)this指向有什么用呢?我們先來看一段代碼 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...
閱讀 3071·2021-11-23 09:51
閱讀 1052·2021-09-02 15:21
閱讀 3018·2019-08-30 13:56
閱讀 1842·2019-08-29 14:12
閱讀 717·2019-08-29 13:53
閱讀 1678·2019-08-29 11:32
閱讀 1340·2019-08-29 11:25
閱讀 1504·2019-08-28 17:51