javascript中this的學習總結

2021-09-08 22:22:51 字數 2457 閱讀 7415

在開發中,this多使用在function函式中,也正是由於呼叫function的物件的不同,才導致了this的指向不同。需要明白(1)、function也是物件;(2)、function執行時是在某個特定的上下文中執行的。

function是物件,物件就有方法,function中最核心的方法是call方法。

舉例call使用的方法:

function say(content)

say.call('bob','world');//from bob: hello world

分析call用法:(1)、把第二個到最後乙個引數作為函式執行時要傳入的引數

(2)、把函式執行時的this指向第乙個引數

上面例子通過call,讓函式執行時的this指向「bob」,然後把「world」作為引數傳入,所有得到那樣輸出結果

再如:function say(word)

say('hello world');//hello world

通過以上方式轉換為call使用

say.call(window,'hello world');//hello world

所以如果想知道function中this指代是誰,可以在腦海中做call使用轉換

總結:每次看到 funcname(***)時,轉換funcname.call(window,***);當然此處window指代一般情況下this

例1、匿名函式如:

(function say(word))('hello word');

call轉換等價於

(function say(word)).call(window,'hello word');

例2、物件中函式呼叫如:

var person=

};person.run(30);//bob has been running for over 30 minutes

call呼叫轉換等價於

person.run.call(person,30);//bob has been running for over 30 minutes

如果是var person=

};var name='tom';

person.run(30);//bob has been running for over 30 minutes

person.run.call(window,30);//tom has been running for over 30 minutes

例3、var obj=

};obj.f();//等價於obj.f.call(obj);//==>20

obj.innerobj=

};obj.innerobj.f();//等價於obj.innerobj.f.call(obj.innerobj);//==>30

例4、

var x=10;

var obj=;

foo();}};

obj.f();//等價於obj.f.call(obj);//==>20 10

上面,obj中f函式中定義的foo,this指代window,而foo作用域在obj.f函式內

如果也想讓上面foo函式也輸出obj內的x,改寫**如下:

var x=10;

var obj=;

foo();}};

雖然上面foo 函式的this仍然指向window,但是that取得obj中this,輸出的是that.x, 也就是obj中的x。

例5、var x=10;

var obj=

};obj.f();//相當於obj.f.call(obj);//==>20

var fout=obj.f;

fout();//相當於fout.call(window);//==>10

var obj2=;

obj2.f();//相當於obj2.f.call(obj2);//==>30

this是在執行時才會被確認的

js建構函式

用於建構函式

先看一段**:

func person(name)varcaibirdme =newperson("deen");// caibirdme.name == deen

我上面也說了,函式在用作建構函式時同樣可以用call方法去代替,那這裡怎麼代替呢?

這裡你又需要明確一點:

new constrcut()是一種建立物件的語法糖

它等價於

functionperson(name)varfoo =newperson("deen");//通過new建立了乙個物件//new是一種語法糖,new person等價於varbar =(function(name);_newobj.constructor(name);

// _newobj.constructor.call(_newobj, name)return_newobj;})();

JavaScript中prototype的理解

prototype使我們能夠向物件新增屬性或者方法。語法 object.prototype.name value 2.基於原型的繼承 obj2 和obj3都是函式foo的例項,可以看到每個例項不僅有自己自身的屬性,還具有原型鏈上的x 也就是foo.prototype 3.prototype與原型 通...

javascript中處理時間

var mydate new date mydate.getyear 獲取當前年份 2007 mydate.getfullyear 獲取完整的年份 2007 mydate.getmonth 獲取當前月份 0 11,0代表1月 11 mydate.getdate 獲取當前日 1 31 20 mydat...

javascript中處理時間

var mydate new date mydate.getyear 獲取當前年份 2007 mydate.getfullyear 獲取完整的年份 2007 mydate.getmonth 獲取當前月份 0 11,0代表1月 11 mydate.getdate 獲取當前日 1 31 20 mydat...