时间:2021-05-26
几条规则确定函数里的 this 是什么。
想确定 this 是什么其实非常简单。总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this。它遵循下面这些规则,接下来以优先级顺序说明。
规则
1、如果在调用函数时使用 new 关键字,那么函数里的 this 就是一个全新的对象。
function ConstructorExample() { console.log(this); this.value = 10; console.log(this);}new ConstructorExample();// -> {}// -> { value: 10 }2、如果使用 apply、call 或者 bind 调用函数,那么函数里的 this 就是作为参数传进去的对象。
function fn() { console.log(this);}var obj = { value: 5};var boundFn = fn.bind(obj);boundFn(); // -> { value: 5 }fn.call(obj); // -> { value: 5 }fn.apply(obj); // -> { value: 5 }3、如果函数作为一个方法调用,就是说如果使用点符号调用函数,那么 this 就是拥有这个函数作为属性的对象。换句话说,当一个点在函数调用的左侧时,this 就是这个点左侧的那个对象。
var obj = { value: 5, printThis: function() { console.log(this); }};obj.printThis(); // -> { value: 5, printThis: ƒ }4、如果函数作为一个纯粹的函数调用,也就是说,它在没有上述任何条件的情况下被调用,那么 this 就是全局对象。在浏览器里,就是 window 对象。
function fn() { console.log(this);}// 如果在浏览器里调用:fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}注意这个规则其实和第三个规则是一样的,区别在于没有声明为方法的函数会自动成为全局对象 window 的属性。因此,这其实是一个隐式的方法调用。当我们调用 fn(),其实就会被浏览器理解为 window.fn(),所以 this 就是 window。
console.log(fn === window.fn); // -> true5、如果上述规则有多个适用,那么优先级更高的就会设置 this 值。
6、如果是 ES2015 里的箭头函数,那么它将忽略上述所有规则,并在创建的时候接收包含它的作用域作为 this 的值。想确定 this 具体是什么的话,只需从创建箭头函数那里往上一行,看看那儿的 this 是什么,箭头函数里的 this 值和它一样。
const obj = { value: 'abc', createArrowFn: function() { return () => console.log(this); }};const arrowFn = obj.createArrowFn();arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }看回第三个规则,当我们调用 obj.createArrowFn() 的时候,createArrowFn 里的 this 是 obj,因为这是方法调用。因此,obj 会在 arrowFn 里绑定到 this 上。如果我们在全局作用域创建一个箭头函数,那么 this 值就会是 window。
应用规则
让我们来看一个代码示例,并应用这些规则。尝试一下看能否弄清楚不同的函数调用下,this 是什么。
确定应用了哪条规则
var obj = { value: 'hi', printThis: function() { console.log(this); }};var print = obj.printThis;obj.printThis(); // -> {value: "hi", printThis: ƒ}print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}obj.printThis() 属于第三条规则,方法调用。另一方面,print() 属于第四条规则,纯粹的函数调用。对于 print() 来说,我们在调用的时候没有使用 new、bind/call/apply 或者点符号,所以它对应了规则四,this 就是全局对象 window。
当适用多个规则的时候
当适用多个规则的时候,使用列表里更高优先级的规则。
var obj1 = { value: 'hi', print: function() { console.log(this); },};var obj2 = { value: 17 };如果规则二和规则三同时适用,那么规则二占优。
obj1.print.call(obj2); // -> { value: 17 }如果规则一和规则三同时适用,那么规则一占优。
new obj1.print(); // -> {}库
有些库有时候会故意将 this 值绑定到某些函数里。而通常会在函数里将最有用的值绑定到 this 上使用。举个例子,jQuery 把 this 绑定到 DOM 元素上,在回调中触发一个事件。如果某个库出现一个不太符合上述规则的 this 值,那么请仔细阅读这个库的文档,它很有可能使用 bind 绑定了。
总结
以上所述是小编给大家介绍的JavaScript 中的 this 简单规则,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
COM组件中调用JavaScript函数详解及实例要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc()
1.嵌入规则Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以的形式包含进来。Javascript代码若不是该页面专用的,则应尽量避免
大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一。在仔细阅读EC
javascript中toFixed使用的是银行家舍入规则。银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。简单来说就是:四舍
javascript的prototype原型简单介绍:prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一