本文講述js中this的指向;介紹es5和es6中this的不同
在js es5中,使用的是function
函式,誰在呼叫function,this就指向誰
,有以下幾個特點:
1.1 this最終指向的是呼叫它的物件
這個特點的就是es5中this的指向,其它特點都是對它的補充,如下示例:
function
test()
test()
;//這裡實際上是window在呼叫,所以指向的是window物件
var obj =};
obj.
fun();
// 這裡指向的是obj物件
1.2 函式被多層物件所包含,如果函式被最外層物件呼叫,this指向的也只是它上一級的物件var obj =}}
};obj.obj1.obj2.
fun();
//
從上面的示例中可以看出,不管object有幾層,最終this指向的呼叫它的那級物件。
1.3 建構函式中this指向的是例項物件
function
student
(name, age)
var st =
newstudent
("js",10
);//student
console.
log(st)
;//student
通過示例可以看到,建構函式中,this指向的就是例項物件
1.4 如果建構函式中有return,如果return的值是物件,this不會指向例項化物件,如果不是物件,則this保持原來的規則,這裡null比較特殊
第一種,return乙個物件:
function
student
(name, age);}
var st =
newstudent
("js",10
);//student
console.
log(st)
;//
第二種,return乙個非物件
function
student
(name, age)
var st =
newstudent
("js",10
);//student
console.
log(st)
;//student
第三種,return null
function
student
(name, age)
var st =
newstudent
("js",10
);//student
console.
log(st)
;//student
箭頭函式的this指向的上層作用域的this,也可以理解為指向上下文物件,在定義的時候已經確定了,不像es5中需要在執行時才可以判斷出來。
test=(
)=>
test()
;//window
var obj =};
obj.
fun();
//window
var obj1 =}}
;var fun = obj1.
fun();
fun();
//var a = obj1.fun;
var b =a(
);b(
);//window
var obj2 =}}
;var fun = obj2 .
fun();
fun();
//window
這裡重點關注乙個上一層作用域
var obj =
;var obj1 =};
obj1.
fun();
call
(obj);//
obj1.fun.
(obj);//
obj1.fun.
bind
(obj)()
;//
function
myfun
(fr, to)
var db =
;myfun.
call
(db,
'成都'
,'上海');
// testname 年齡 25 來自 成都 去往 上海
myfun.
(db,
['成都'
,'上海'])
;// testname 年齡 25 來自 成都 去往 上海
myfun.
bind
(db,
'成都'
,'上海')(
);// testname 年齡 25 來自 成都 去往 上海
call 的引數是直接放進去的,第二第三第 n 個引數全都用逗號分隔
bind 除了返回是函式以外,它 的引數和 call 一樣
js之旅(六)js中set的使用
set是es6中的資料結構,和陣列的區別是set不能有重複的值,本文將簡單介紹set的使用。js中使用new set 來宣告set var a newset v1 console.log a set 1 a.add v2 console.log a set 2 console.log typeof ...
js之旅(五)js中的物件和Map
object和map儲存的都是鍵值對組合,本文將介紹json物件和map的使用,對比它們之間的差異 1.1 json物件 json物件的使用比較簡單,他是key value形式的鍵值對,直接用花括號包裹起來即可定義,使用時用.號加key值得形式客戶獲取到value的值,也可以用這個方法來改變valu...
js之旅(九)js的繼承
本文主要講解js中幾種實現繼承的方法。通過 某種方式 讓乙個物件可以訪問到另乙個物件中的屬性和方法,我們把這種方式稱之為繼承 並不是所謂的 extends yyy。這裡構造乙個父建構函式animal function animal age,name 原型方法 animal.prototype.sle...