ECMAJavascript中this有什么用
這篇文章給大家分享的是有關(guān)ECMA Javascript中this有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鄂托克前網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定，它指向什么完全取決于函數(shù)的調(diào)用位置（也就是函數(shù)的調(diào)用方法）。
四條規(guī)則：(你不知道的JS)
1. 默認(rèn)綁定
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2無論是否在嚴(yán)格模式下，在全局執(zhí)行上下文中（在任何函數(shù)體外部）this 都指代全局對(duì)象。(MDN)
在嚴(yán)格模式下，this將保持他進(jìn)入執(zhí)行上下文時(shí)的值，如果 this 沒有被執(zhí)行上下文（execution context）定義，那它將保持為 undefined。(MDN)
function foo() {
"use strict";
console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined2. 隱式綁定/丟失
當(dāng)函數(shù)作為對(duì)象里的方法被調(diào)用時(shí)，它們的 this 是調(diào)用該函數(shù)的對(duì)象，且綁定只受最靠近的成員引用的影響。(MDN)
//隱式綁定
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42//隱式丟失
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// fn 其實(shí)引用的是 foo
fn(); // <-- 調(diào)用位置！
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a 是全局對(duì)象的屬性
doFoo( obj.foo ); // "oops, global"3. 顯示綁定
如果要想把 this 的值從一個(gè)上下文傳到另一個(gè)，就要用 call 或者apply 方法。(MDN)
調(diào)用f.bind(someObject)會(huì)創(chuàng)建一個(gè)與f具有相同函數(shù)體和作用域的函數(shù)，但是在這個(gè)新函數(shù)中，this將永久地被綁定到了bind的第一個(gè)參數(shù)，無論這個(gè)函數(shù)是如何被調(diào)用的。
var obj = {
count: 0,
cool: function coolFn() {
if (this.count < 1) {
setTimeout( function timer(){
this.count++; // this 是安全的
// 因?yàn)?bind(..)
console.log( "more awesome" );
}.bind( this ), 100 ); // look, bind()!
}
}
};
obj.cool(); // 更酷了。硬綁定
創(chuàng)建一個(gè)包裹函數(shù)，傳入所有的參數(shù)并返回接收到的所有值。
硬綁定會(huì)大大降低函數(shù)的靈活性，使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this 。
// 簡(jiǎn)單的輔助綁定函數(shù)
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
};
}軟綁定
給默認(rèn)綁定指定一個(gè)全局對(duì)象和 undefined 以外的值，那就可以實(shí)現(xiàn)和硬綁定相同的效果，同時(shí)保留隱式綁定或者顯式綁定修改 this 的能力。
Function.prototype.softBind = function(obj) {
var fn = this;
var curried = [].slice.call( arguments, 1 );// 捕獲所有 curried 參數(shù)
var bound = function() {
return fn.apply(
(!this || this === (window || global))?obj : this
curried.concat.apply( curried, arguments )
);
};
bound.prototype = Object.create( fn.prototype );
return bound;
};4. new 綁定
當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)（使用new關(guān)鍵字），它的this被綁定到正在構(gòu)造的新對(duì)象。(MDN)
使用 new 來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作(你不知道的JS)
創(chuàng)建（或者說構(gòu)造）一個(gè)全新的對(duì)象。
這個(gè)新對(duì)象會(huì)被執(zhí)行 [[ 原型 ]] 連接。
這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this 。
如果函數(shù)沒有返回其他對(duì)象，那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2四條規(guī)則優(yōu)先級(jí)
new 綁定 > 顯式綁定 > 隱式綁定 > 默認(rèn)綁定
函數(shù)是否在 new 中調(diào)用（ new 綁定）？如果是的話 this 綁定的是新創(chuàng)建的對(duì)象。
var bar = new foo()
函數(shù)是否通過 call 、 apply （顯式綁定）或者硬綁定調(diào)用？如果是的話， this 綁定的是指定的對(duì)象。
另外：如果綁定 null 或者 undefined ，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則。var bar = foo.call(obj2)
函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用（隱式綁定）？如果是的話， this 綁定的是那個(gè)上下文對(duì)象。
var bar = obj1.foo()
如果都不是的話，使用默認(rèn)綁定。如果在嚴(yán)格模式下，就綁定到 undefined ，否則綁定到全局對(duì)象。
var bar = foo()
其中：間接引用函數(shù)會(huì)應(yīng)用默認(rèn)綁定規(guī)則
function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 (p.foo = o.foo)(); // 2
例外
1. 箭頭函數(shù)
箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域來決定 this 。
在箭頭函數(shù)中，this與封閉詞法上下文的this保持一致。(MDN)
箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的 this 綁定（無論 this 綁定到什么）。這其實(shí)和self = this 機(jī)制一樣。
箭頭函數(shù)的綁定無法被修改。
2. nodejs
setTimeout(function() {
console.log(this)
//瀏覽器中：window
//nodejs中：Timeout實(shí)例
}, 0)其他解釋
https://www.zhihu.com/questio...
func(p1, p2) 等價(jià)于
func.call(undefined, p1, p2)
obj.child.method(p1, p2) 等價(jià)于
obj.child.method.call(obj.child, p1, p2)
如果你傳的 context 就 null 或者 undefined，那么 window 對(duì)象就是默認(rèn)的 context（嚴(yán)格模式下默認(rèn) context 是 undefined）
例子
var number = 50;
var obj = {
number: 60,
getNum: function () {
var number = 70;
return this.number;
}
};
alert(obj.getNum());
alert(obj.getNum.call());
alert(obj.getNum.call({number:20}));感謝各位的閱讀！關(guān)于ECMA Javascript中this有什么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
分享題目：ECMAJavascript中this有什么用
當(dāng)前鏈接：http://m.jiaotiyi.com/article/gccoej.html