Rumah > Artikel > hujung hadapan web > js中This的优雅使用
这次给大家带来js中This的优雅使用,js中This优雅使用的注意事项有哪些,下面就是实战案例,一起来看一下。
当一个函数被调用时,会创建一个活动记录(执行上下文)。
这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数>等信息。
this就是记录的其中一个属性,会在函数执行的过程中用到。
this既不指向函数自身也不指向函数的作用域。
this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。
在严格模式下,一般函数调用的时候this指向undefined。
一、为什么要使用this
this提供了一种更优雅的方式来隐式的“传递”一个对象的引用,因此可以将API设计的更加简洁并且易于复用。
eg:
var me = { name: "fenfei" }; //不使用this,调用 function speak(name){ console.log("Hello, I'm "+ name); } speak(me.name); //Hello, I'm fenfei //使用this,调用 function speak(){ console.log("Hello, I'm "+ this.name); } speak.call(me); //Hello, I'm fenfei
二、this存在的两个误解
(1)this指向函数自身;
(2)this指向函数的作用域。
作用域无法通过JavaScript代码访问,它存在于JavaScript引擎内部。每当把this和词法作用域的查找混合使用时,一定要提醒自己,这是无法实现的!
this是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用位置(也就是函数的调用方式)!
三、绑定规则
1)默认绑定
最常用的函数调用类型:独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。
eg:
function foo() { console.log(this.a); }var a = 2; foo(); // 2
2)隐式规则
隐式绑定的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。
function foo() { console.log(this.a); }var obj = { a: 2, foo: foo }; obj.foo(); // 2
。当foo()被调用时,this被绑定到obj,因此this.a和obj.a是一样。
但有时候会出现隐式丢失。
function foo() { console.log(this.a); }var obj = { a: 2, foo: foo };var bar = obj.foo; // 函数 var a = "oops, global"; //bar(); // "oops, global"
。虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身。
因此此时的bar()其实是一个不带任何修饰的函数调用,应用了默认绑定。
3)显示绑定
call与apply
。在JavaScript中 call与apply就像this的父母一般,让this住哪它就得住哪,不得不听话!当无参数时,当前对象为window
eg:
var name="全局";var xpg={ name:"局部"};function getName(){ alert(this.name); } getName(xpg);//全局getName.call(xpg);//局部getName.call();//全局
。其中this身处函数getName中。无论this身处何处,一定要找到函数运行时的位置。此时函数getName运行时的位置,对于
(1)getName(xpg);//全局
显然,函数getName所在的对象是window,因此this的安身之处定然在window,即指向window对象,则getName返回的this.name其实是window.name,因此alert出来的是“全局”!
(2)getName.call(xpg);//局部
。其中,call指定this的安身之处就是在xpg对象,因为this被迫只能在xpg那安家,则此时this指向xpg对象, this.name其实是xpg.name,因此alert出来的是“局部”!
bind()
。bind方法是es5开始提供的,所以ie9+才支持
eg:
function f(){ return this.a; } var g = f.bind({a : "test"}); //想把某个对象作为this的时候,就把它传进去,得到一个新对象gconsole.log(g()); // test //重复调用的时候,this已经指向bind参数。 //这对于我们绑定一次需要重复调用依然实现绑定的话,会比apply和call更加高效(看下面这个例子)var o = {a : 37, f : f, g : g};
console.log(o.f(), o.g()); // 37, test //o.f()通过对象的属性调用,this指向对象o;//比较特殊的是即使我们把新绑定的方法作为对象的属性调用,//o.g()依然会按之前的绑定去走,所以答案是test不是g
4)new绑定
new的this绑定不能被修改!
new调用函数会自动执行下面操作:
(1)创建(或者说构造)一个全新的对象;
(2)这个新对象会被执行[[原型]]连接;
(3)这个新对象会绑定到函数调用的this;
(4)如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
eg:
function Person(name,age) { this.name = name this.age = age console.log("我也只不过是个普通函数") } Person("zxt",22) // "我也只不过是个普通函数"console.log(name) // "zxt"console.log(age) // 22var zxt = new Person("zxt",22) // "我也只不过是个普通函数"console.log(zxt.name) // "zxt"console.log(zxt.age) // 22
上面这个例子中,首先定义了一个 Person 函数,既可以普通调用,也可以以构造函数的形式的调用。
。当普通调用时,则按照正常的函数执行,输出一个字符串。
。如果是通过一个new操作符,则构造了一个新的对象。
。普通调用时,前面已经介绍过,此时应用默认绑定规则,this绑定在了全局 对象上,此时全局对象上会分别增加 name 和 age 两个属性。
。当通过new操作符调用时,函数会返回一个对象,从输出结果上来看 this 对象绑定在了这个返回的对象上。
因此,所谓的new绑定是指通过new操作符来调用函数时,会产生一个新对象,并且会把构造函数内的this绑定到这个对象上。
四、优先级
new绑定>call\apply等显示绑定>隐式绑定>默认绑定。
了解了函数调用中this绑定的四条规则,需要做的就是找到函数的调用位置并判断对应哪条规则。
(1)函数是否是new绑定?如果是,this绑定的是新创建的对象。
var bar = new Foo();
(2)函数是否通过call、apply显示绑定或硬绑定?如果是,this绑定的是指定的对象。
var bar = foo.call(obj);
(3)函数是否在某个上下文对象中隐式调用?如果是,this绑定的是那个上下文对象。
var bar = obj.foo();
(4)上述全不是,则使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局window对象。
var bar = foo();
new绑定和call、apply无法一起使用,因此不能使用new foo.call(obj).
五、this绑定例外
1)被忽略的绑定
如果你把null或者undefined作为this的绑定对象传入call、apply或者bind。
这些值在调用时会被忽略,实际应用的是默认绑定规则。
eg:
function foo() { console.log(this.a); }var a = 2; foo.call(null); // 2
2)间接引用
eg:
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
赋值表达式p.foo = o.foo的返回值是目标函数的引用,因此调用位置是foo()而不是p.foo()或者o.foo()。
3)当前对象不明确时的this
当没有明确的执行时的当前对象时,this指向全局对象window。
例如对于全局变量引用的函数上我们有:
var name = "Tom";var Bob = { name: "Bob", show: function(){ alert(this.name); } }var show = Bob.show; show(); //Tom
。你可能也能理解成show是window对象下的方法,所以执行时的当前对象时window。但局部变量引用的函数上,却无法这么解释:
var name = "window";var Bob = { name: "Bob", showName: function(){ alert(this.name); } };var Tom = { name: "Tom", showName: function(){ var fun = Bob.showName; fun(); } }; Tom.showName(); //window
4)在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window:
var name = "Bob"; var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){ setTimeout(this.showName, 1000); } }; nameObj.waitShowName();
5)软绑定
eg:
var count=2;var obj={ count:0, cool:function coolFn(){ console.log(this.count);//0 var self=this; if(self.count<1){ setTimeout(function timer(){ self.count++; console.log("awesome?"); console.log(self.count);//1 console.log(this.count);//2 },100); } } }; obj.cool();
6)dom事件中的this
(1)直接在dom元素中使用
1eb9ebab541c78a07af4b7a6c86d652c
分析:对于dom元素的一个onclick(或其他如onblur等)属性,它为所属的html元素所拥有,直接在它触发的函数里写this,this应该指向该html元素。
(2)给dom元素注册js函数
a、不正确的方式
<script type="text/javascript"> function thisTest(){ alert(this.value); // 弹出undefined, this在这里指向??}</script><input id="btnTest" type="button" value="提交" onclick="thisTest()" />
。分析:onclick事件直接调用thisTest函数,程序就会弹出undefined。
因为thisTest函数是在window对象中定义的, 所以thisTest的拥有者(作用域)是window,thisTest的this也是window。而window是没有value属性的,所以就报错了。
b、正确的方式
<input id="btnTest" type="button" value="提交" /><script type="text/javascript"> function thisTest(){ alert(this.value); }document.getElementById("btnTest").onclick=thisTest; //给button的onclick事件注册一个函数</script>
。分析:在前面的示例中,thisTest函数定义在全局作用域(这里就是window对象),所以this指代的是当前的window对象。
而通过document.getElementById(“btnTest”).onclick=thisTest;这样的形式,其实是将btnTest的onclick属性设置为thisTest函数的一个副本,在btnTest的onclick属性的函数作用域内,this归btnTest所有,this也就指向了btnTest。
因为多个不同的HTML元素虽然创建了不同的函数副本,但每个副本的拥有者都是相对应的HTML元素,各自的this也都指向它们的拥有者,不会造成混乱。
eg:
<input id="btnTest1" type="button" value="提交1" onclick="thisTest()" /><input id="btnTest2" type="button" value="提交2" /><script type="text/javascript">function thisTest(){this.value="提交中"; }var btn=document.getElementById("btnTest1"); alert(btn.onclick); //第一个按钮函数var btnOther=document.getElementById("btnTest2"); btnOther.onclick=thisTest; alert(btnOther.onclick); //第二个按钮函数</script>
其弹出的结果是:
//第一个按钮function onclick(){ thisTest() }//第二个按钮function thisTest(){ this.value="提交中"; }
7)this词法(ES6:箭头函数)
箭头函数不使用function关键字定义,而是使用“胖箭头”的操作符=>定义;箭头函数不使用this的四种标准规则,而是根据外层(函数或者全局)作用域来决定this。
eg:
function foo(){ return (a)=>{ //this继承自foo console.log(this.a); }; }var obj1={ a:2}var obj2={ a:3}var bar=foo.call(obj1); bar.call(obj2);//2不是3!
foo()内部创建的箭头函数会捕获调用时foo()的this。由于foo()的this被绑定到obj1,bar(引用箭头函数)的this也被绑定到obj1,而箭头函数的绑定无法修改。(new的也不能!)
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci js中This的优雅使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!