一、被apply和call呼叫的函式中沒有傳遞引數
(一)不傳引數
結果:
(二)傳遞 null
結果:
總結:
1.當使用 apply和 call去呼叫函式並且沒有傳遞引數時,前提這個函式中也沒有傳遞引數,我們發現 他們的列印結果和 this 指向是相同的 都是指向window 此時相當於 f1() 呼叫函式 就相當於 f1.apply() 和 f1.call()
2.當傳遞 null 的時候,他們的指向也是相同的 都是指向 window
此時相當於 f1() 呼叫函式 就相當於 f1.apply(null) 和 f1.call(null)
(三)當傳遞一個具體物件時
結果:
我們發現 使用
f1.apply(stu)
和f1.call(stu)
去呼叫函式的時候,this的指向發生了改變,不再是 window,而是 Object
二、被 apply和 call 呼叫的函式中有引數傳遞
(一)apply和call不傳遞引數
結果:
總結:
apply和call沒有傳遞引數,所以沒有進行引數的運算,值是 NaN ,但是他們的this指向並沒有改變,仍然是 window
(二)當傳遞null時
結果:
總結:
與不傳引數的結果是一樣的,值是 NaN,並且this 指向沒有改變
(三)當傳入一個具體物件時
結果:
總結:
兩個方法傳入具體物件時,都改變了 this的指向,this 指向不是 window ,而是 Object
思考:
兩者都傳入一個物件改變了 this 指向,但是如何去傳入引數進行函式的運算呢???
(四)傳入多個引數
結果:
總結:
1.apply和call傳入的第一個參數列示 this 指向的物件
2.apply和call可以傳遞多個引數,只是他們傳遞引數的方式不一樣
3.apply是以陣列的方式傳遞引數的
4.call是以引數列表的方式傳遞引數的,也就是通過一個一個的方式傳遞引數
(五)改變this指向,獲取物件中的屬性值
總結:
1.f1()函式呼叫時,this的指向是window,而window中沒有定義age這個屬性值,所以是 undefined
2.apply和call都改變了 this 的指向,this 指向了 stu ,stu這個物件中有 age 這個屬性值 ,所以輸出 age = 18
三、被apply和 call 呼叫的函式中有返回值
總結:
apply 和 call 都使用變數來接收函式的返回值
四、原型指向改變案例
function Person(food) {
this.food = food
}
// 通過原型來新增方法
Person.prototype.eat = function (x, y) {
console.log('我好想吃 ---->' + this.food)
console.log(x + y)
}
var per = new Person('大豬蹄')
per.eat(100, 100)
//建立 stu 物件,並新增屬性和方法
console.log('============================')
function Student(food) {
this.food = food
}
Student.prototype.study = function () {
console.log('禿頭少女的日常操作,天天敲程式碼')
}
var stu = new Student('大雞腿')
//改變this指向,讓this指向 stu物件
//能呼叫 per物件中的方法
per.eat.apply(stu, [200, 200])
//也能呼叫自己的方法
stu.study()
結果:
五、總結apply與call
-
apply 的使用方式
函式名字.apply (物件,[引數1,引數2,...])
方法名字.apply (物件,[引數1,引數2,...]) -
call 的使用方式
函式名字.call (物件,引數1,引數2,...)
方法名字.call (物件,引數1,引數2,...) -
作用:改變this 的指向
-
區別:引數傳遞的方式不一樣
-
使用場景:只要是想使用別的物件的方法,並且希望這個方法是當前物件自己的,那麼就可以使用 apply 或者 call 的方法 改變 this 的指向
六、bind 方法的使用
結果:
我們發現,雖然使用了bind 方法,但是它並沒有輸出內容,所以,要用一個變數接收一下,然後再呼叫
結果:
還可以寫成:
七、bind方法的案例
function Person(say){
this.say = say
}
Person.prototype.play = function(x,y){
console.log('做人嘛~~最重要的就是要開心吶!!' + this.say )
console.log(x+y)
}
var per = new Person('對呢對呢')
per.play(10,10)
//這是一條華麗的分割線
console.log('==============================================')
function Student(say){
this.say = say
}
Student.prototype.study = function(){
console.log('一根毛,兩根毛,頭上還有幾根毛')
}
var stu = new Student('撒花撒花')
//呼叫別人的方法
var ff = per.play.bind(stu)
ff(20,20)
//呼叫自己的方法
stu.study()
結果:
八、apply與call與bind之間的區別
相同點:
- 他們的作用都是相同的:改變 this 的指向
- 當他們不傳引數的時候,就跟直接呼叫函式或者方法的作用一樣,不改變this的指向
- 當只傳入 null 的,與上面作用也是一樣,不改變this的指向
不同點:
- apply 與 call 直接呼叫即可
- bind 要使用變數接收一下,然後再呼叫
- apply與call 是在呼叫的時候直接傳遞引數
- bind 可以在用變數接收的時候傳遞引數,也可以在接收後在呼叫中傳遞引數
- 傳遞引數的方式不一樣
- apply 的使用方式
函式名字.apply (物件,[引數1,引數2,...])
方法名字.apply (物件,[引數1,引數2,...]) - call 的使用方式
函式名字.call (物件,引數1,引數2,...)
方法名字.call (物件,引數1,引數2,...) - bind 的使用方式:
函式名字.bind (物件,引數1,引數2,...)
函式名字. bind (物件),在呼叫時再傳遞引數
方法名字.bind (物件,引數1,引數2,...)
方法名字. bind (物件),在呼叫時再傳遞引數