你不知道的JS上卷this

最新推荐文章于 2024-10-01 20:12:28 发布

张旭豪

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量118

点赞数

分类专栏： JavaScript基础进阶文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40548203/article/details/109532064

版权

JavaScript基础进阶专栏收录该内容

6 篇文章 0 订阅

订阅专栏

此文为学习笔记。

每个函数的this是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）

this是怎么绑定的呢？js中的this是根据调用位置绑定的。具体一点的位置就是在当前执行函数的前一个调用函数中。

js this的绑定方法有：

默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。
可以把这条规则看作是无法应用其他规则时的默认规则。

function foo(){
  console.log(this.a);
} 
var a=2;
foo();//2 因为this指向了全局对象
//在代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。


//如果使用严格模式（strictmode），那么全局对象将无法使用默认绑定，因此this会绑定到undefined：
function foo(){
	"use strict";
	console.log(this.a);
}
var a=2;
foo(); //TypeError : this is undefined
//注意！：如果只是调用在严格模式，而this没有运行在严格模式的话，也会正常运行。   
//严格模式下与foo()的调用位置无关

隐式绑定

调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含
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);
}
var obj={
  a:2,
  foo:foo
};
var bar = obj.foo;//函数别名！
var a="oops,global";//a是全局对象的属性
bar();//"oops,global"

虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

	function foo(){
      console.log(this.a);
    }
    function doFoo(fn){
      //fn其实引用的是foo
      fn();//<--调用位置！
    }
    var obj = {
      a:2,
      foo:foo
    };
    var a = "oops,global";//a是全局对象的属性
    doFoo(obj.foo);//"oops,global"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。
函数传入语言内置也是一样
除此之外，还有一种情况this的行为会出乎我们意料：调用回调函数的函数可能会修改this。

显示绑定
可以使用函数的call(…)和apply(…)方法。
这两个方法是如何工作的呢？它们的第一个参数是一个对象，它们会把这个对象绑定到this，接着在调用函数时指定这个this。因为你可以直接指定this的绑定对象，因此我们称之为显式绑定。
```
function foo(){
console.log(this.a);
}
var obj={
a:2
};
foo.call(obj);//2
```
通过foo.call(…)，我们可以在调用foo时强制把它的this绑定到obj上。
如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作this的绑定对象，这个原始值会被转换成它的对象形式（也就是newString(…)、newBoolean(…)或者newNumber(…)）。这通常被称为“装箱”。

可惜，显式绑定仍然无法解决我们之前提出的丢失绑定问题。

1.硬绑定
但是显式绑定的一个变种可以解决这个问题。

```javascript
function foo(){
	console.log(this.a);
}
var obj = {
	a:2
};
var bar=function(){
	foo.call(obj);
};
bar();//2
setTimeout(bar,100);//2
//硬绑定的bar不可能再修改它的this
bar.call(window);//2
```

无论之后如何调用函数bar，它总会手动在obj上调用foo。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

new绑定
就是new绑定

绑定的优先级：
默认绑定<隐式绑定<显示绑定（<硬绑定）<new绑定

绑定例外：

当出现绑定例外的时候不管当前是什么绑定都变为默认绑定

情况1：被忽略的this
如果你把null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则

function foo(){
	console.log(this.a);
}
var a=2;
foo.call(null);//2

情况2：间接引用
另一个需要注意的是，你有可能（有意或者无意地）创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则。

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

情况3：软绑定

可以通过一种被称为软绑定的方法来实现我们想要的效果：

if(!Function.prototype.softBind){
	Function.prototype.softBind=function(obj){
	var fn=this;//捕获所有curried参数
	var curried=[].slice.call(arguments,1);
	var bound=function(){
		return fn.apply(
			(!this||this===(window||global))?
				obj:this
			curried.concat.apply(curried,arguments)
		);
	};
	bound.prototype=Object.create(fn.prototype);
	returnbound;
	};
}

除了软绑定之外，softBind(…)的其他原理和ES5内置的bind(…)类似。它会对指定的函数进行封装，首先检查调用时的this，如果this绑定到全局对象或者undefined，那就把指定的默认对象obj绑定到this，否则不会修改this。此外，这段代码还支持可选的柯里化

下面我们看看softBind是否实现了软绑定功能：

function foo(){
	console.log("name:"+this.name);
}

var obj={name:"obj"},
  obj2={name:"obj2"},
  obj3={name:"obj3"};
  
  var fooOBJ=foo.softBind(obj);
  
  fooOBJ();//name:obj
  
  obj2.foo=foo.softBind(obj);
  obj2.foo();//name:obj2<----看！！！
  
  fooOBJ.call(obj3);//name:obj3<----看！
  
  setTimeout(obj2.foo,10);
  //name:obj<----应用了软绑定