深度解析javascript中的this（三）

谁借莪１个温暖的怀抱￠ 2022-10-11 06:14 133阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  优先级
     *  从bind源码看为什么new绑定优先级更高
     *  new绑定和显式绑定在函数柯里化的应用
 *  小结

# 前言 #

上一章我们说到，this绑定的四种规则，默认绑定，隐式绑定，显式绑定和new绑定，并且我们抛出了一个问题，如果当这几个绑定一起使用的时候，优先级又是怎样的，这一章我们将就这个问题进一步展开解释

# 正文 #

## 优先级 ##

毫无疑问，默认绑定的优先级是四条规则中最低的，所以我们可以先不考虑它。我们先来比较一下隐式绑定和显式绑定的优先级，看一下下面的例子：

可以看到，显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。然后我们再看一下new绑定和隐式绑定的优先级谁更高

可以看到 new 绑定比隐式绑定优先级高。最后我们只需要比较一下new绑定和显式绑定就可以了，new 和 call/apply 无法一起使用，因此无法通过 new foo.call(obj1) 来直接进行测试。但是我们可以使用上一章说的硬绑定来测试它俩的优先级，也就是bind

function foo(something) { 
    	this.a = something;
    }
    var obj1 = { };
    var bar = foo.bind( obj1 );
    bar( 2 );
    console.log( obj1.a ); // 2
    var baz = new bar(3);
    console.log( obj1.a ); // 2
    console.log( baz.a ); // 3

不难看出，这里采用了new的this绑定，也就是new的this绑定优先级是在bind之前的，总结下来就是new绑定 > 显式绑定 > 隐式绑定 > 默认绑定，不过其实new的绑定优先级

## 从bind源码看为什么new绑定优先级更高 ##

if (!Function.prototype.bind) { 
    	Function.prototype.bind = function(oThis) { 
    		if (typeof this !== "function") { 
    			// 与 ECMAScript 5 最接近的
    			// 内部 IsCallable 函数
    			throw new TypeError(
    			"Function.prototype.bind - what is trying " +
    			"to be bound is not callable"
    		);
    }
    var aArgs = Array.prototype.slice.call( arguments, 1 ),
    fToBind = this,
    fNOP = function(){ },
    fBound = function(){ 
    		return fToBind.apply(
    			(
    			this instanceof fNOP &&
    			oThis ? this : oThis
    			),
    			aArgs.concat(
    			Array.prototype.slice.call( arguments )
    			);
    		}
    	;	
    	fNOP.prototype = this.prototype;
    	fBound.prototype = new fNOP();
    	return fBound;
    	};
    }

下面是 new 修改 this 的相关代码：

this instanceof fNOP &&
    oThis ? this : oThis
    // ... 以及：
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

简单来说，这段代码会判断硬绑定函数是否是被 new 调用，如果是的话就会使用新创建的 this 替换硬绑定的 this。所以这也是为什么new绑定的优先级在bind之上

## new绑定和显式绑定在函数柯里化的应用 ##

那么，为什么要在 new 中使用硬绑定函数呢？直接使用普通函数不是更简单吗？之所以要在 new 中使用硬绑定函数，主要目的是预先设置函数的一些参数，这样在使用new 进行初始化时就可以只传入其余的参数。bind(…) 的功能之一就是可以把除了第一个参数（第一个参数用于绑定 this）之外的其他参数都传给下层的函数（这种技术称为“部分应用”，是“柯里化”的一种）。举例来说：

function foo(p1,p2) { 
    	this.val = p1 + p2;
    }
    // 之所以使用 null 是因为在本例中我们并不关心硬绑定的 this 是什么
    // 反正使用 new 时 this 会被修改
    var bar = foo.bind( null, "p1" );
    var baz = new bar( "p2" );
    baz.val; // p1p2

# 小结 #

这一章我们介绍了this相关绑定的优先级关系，并且从源码层面阐述了new绑定的优先级在显式绑定之前，但是既是规则，总有例外，下一章我们将进一步分析this绑定规则之外的一些例外情况，谢谢学习  
      小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
      每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/1d5d204610814e2392f6611438eafbbb.png