1. firstCase
CODE
var obj1 = {
name:"everyone",
hi:function(){
console.log("Hello!" + obj1.name)
}
}
obj1.hi()
obj1.hi.call()
CONSOLE
"Hello!everyone"
"Hello!everyone"
2. secondCase
CODE
var obj2 = {
name:"jack",
hi:function(person){
console.log("hi!" + person.name )
}
}
obj2.hi(obj2)
//obj2.hi.call(obj2)，出錯
CONSOLE
"hi!jack"
3. thirdCase
CODE
var obj3 = {
name:"rose",
hi:function(name){
console.log("hi!" +
name)
}
}
obj3.hi(obj3.name)
obj3.hi.call(obj3.name)
CONSOLE
"hi!rose"
"hi!undefined"
COMMENT
- call傳入的參數(shù)不能使對象的屬性
4. fourthCase
CODE
var obj4 = {
name:"lucy",
hi:function(object,問候語){
console.log(問候語 + '！我是' + object.name )
}
}
obj4.hi(obj4,'你好')
obj4.hi.call(obj4,'你好')
CONSOLE
"你好！我是lucy"
"undefined！我是undefined"
COMMENT
- 函數(shù)接收的對象由this接收，不能直接在函數(shù)形參上調(diào)用
5. fifthCase
CODE
var obj5 = {
name:"蘿莉",
hi:function(問候語){
console.log(問候語 + this.name)
}
}
obj5.hi('最近過得如何？')
obj5.hi.call(obj5,'最近過得如何？')
obj5.hi.apply(obj5,['最近過得如何？'])
CONSOLE
"最近過得如何？蘿莉"
"最近過得如何？蘿莉"
"最近過得如何？蘿莉"
COMMENT
- 函數(shù)調(diào)用，可以通過call傳參數(shù)，也可以通過apply傳參
- call傳的是字符串，apply傳的是數(shù)組
- 函數(shù)的this有call傳入對象，通過this[屬性]，去取對象上的屬性值
6. sixthCase
CODE
var obj6 = {
hi:function(){
console.log(this)
}
}
var HI = obj6.hi
HI()
obj6.hi()
CONSOLE
Window
obj6
COMMENT
- this值取決于函數(shù)調(diào)用時的環(huán)境
- 當(dāng)函數(shù)賦值給全局變量時，this指向Window
- 當(dāng)函數(shù)賦值給對象的屬性時，this指向調(diào)用的對象obj6
7. seventhCase
CODE
var obj7 = {
hi:function(p1){
console.log(this);
console.log(typeof this);
console.log(typeof 11);
console.log(p1)
}
}
var HI = obj7.hi
HI.call(22,"hello")
CONSOLE
22
"object"
"number"
"hello"
8. eighthCase
CODE
var fn = function(){
console.log(this)
}
var obj8_1 = {
hi:fn
}
var obj8_2 = {
hi:fn
}
fn()
fn(11)
fn.call({name:"lin"})
obj8_1.hi()
obj8_2.hi()
CONSOLE
Window
Window
{name:"lin"}
obj8_1
obj8_2
COMMENT
- 直接調(diào)用函數(shù)，this指向Window
- 傳入?yún)?shù)是對象，則this指向參數(shù)對象
- 以對象的屬性調(diào)用函數(shù)，則this指向?qū)ο?/li>
9. ninthCase
HTML
<button id="xxx">點(diǎn)擊</button>
JavaScript
xxx.onclick = function(e){
console.log(this)
}
CONSOLE
[object HTMLButtonElement]
<button id="xxx">點(diǎn)擊</button>
COMMENT
- 點(diǎn)擊xxx按鈕時，觸發(fā)click事件的target元素對象
- this指向target元素對象
10. tenthCase
JavaScript
setTimeout(function(){
console.log(this)
},1000)
CONSOLE
Window
11. eleventhCase
JavaScript
var obj11 = {
hi:function(){
console.log(this)
}
}
setTimeout(obj11.hi,1000)
setTimeout(obj11.hi.bind(obj11),1000)
CONSOLE
Window
obj11
COMMENT
- 定時器，是由瀏覽器控制的，調(diào)用的對象是Window
- bind()創(chuàng)建一個新的函數(shù), 當(dāng)被調(diào)用時，將其this關(guān)鍵字設(shè)置為提供的值，在調(diào)用新函數(shù)時，在任何提供之前提供一個給定的參數(shù)序列
12. twelfthCase
JavaScript
function fn(){
console.log(this)
}
fn.bind({name:"qing"}).call({name:"li"})
CONSOLE
{name:"qing"}
13. thirteenthCase
JavaScript
function fn(){
console.log(this)
}
fn.bind({name:"qing"}).call({name:"li"})
CONSOLE
{name:"qing"}
14. fourteenthCase
JavaScritpt
var a = [1,2,3]
var b ={0:4,1:5,2:6,length:3}
console.log(a.slice.call(b,0,2))
CONSOLE
[4, 5]
15. fifteenthCase
HTML
<button id="xxx">點(diǎn)我</button>
JavaScript
var name = 'wang'
var obj14 = {
name:'lin',
listen:function(){
console.log("obj14:"+this);
console.log('name:'+this.name)
xxx.onclick = function(){
console.log("onclick.this：" + this)
}
}
}
obj14.listen()
CONSOLE
"obj14:[object Object]"
"name:lin"
"onclick.this：[object HTMLButtonElement]"
COMMENT
- 第一個this指向函數(shù)所在屬性的對象
- 第二個this指向觸發(fā)click事件的'<button id="xxx">點(diǎn)我</button>'元素對象
補(bǔ)充ES6新語法中的this
箭頭函數(shù)可以讓setTimeout里面的this，綁定定義時所在的作用域，
而不是指向運(yùn)行時所在的作用域
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭頭函數(shù)
setInterval(() => this.s1++, 1000);
// 普通函數(shù)
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
第一個this指向構(gòu)造函數(shù)Timer的實(shí)例
第二個this指向window
