js之旅(七)js中this

2021-10-07 16:38:31 字數 2611 閱讀 3715

本文講述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...