十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍JavaScript中this绑定规则的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
我们提供的服务有:做网站、成都做网站、微信公众号开发、网站优化、网站认证、贵南ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的贵南网站制作公司一、this 的绑定规则
this 一共有 4 中绑定规则,接下来一一介绍每种规则的解释和规则直接的优先级
默认绑定(严格/非严格模式)
隐式绑定
显式绑定
new 绑定
1.1 默认绑定(严格/非严格模式)
独立函数调用: 独立函数调用时 this 使用默认绑定规则,默认绑定规则下 this 指向 window(全局对象)。
严格模式下: this 无法使用默认绑定,this 会绑定到 undefined。
独立函数调用
function foo() { console.log(this.a); } var a = 2; foo(); // 2
严格模式下:
function foo() { "use strict"; console.log(this); //undefined console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined } var a = 2; foo();
注意下边两种情况
var age = "18"; var obj = { name: "heyushuo", age: 25, fn: function() { function sayName() { console.log(this); //window console.log(this.age); //undefined } sayName(); } }; obj.fn();
函数 sayName 虽然是在 obj.fn 内部定义的,但是它仍然是一个独立函数调用,this 仍然指向 window。
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函数别名! bar();
虽然 bar 是 obj.foo 的一个引用,但是实际上,它引用的是函数本身,因此此时的
bar() 其实是一个不带任何修饰的独立函数调用,因此应用了默认绑定。
1.2 隐式绑定
当函数引用有上下文对象时(例如:obj.foo 这个时候使用 obj 上下文来引用函数 foo),隐式绑定规则会把函数中的 this 绑定到这个上下文对象。
var obj = { name: "heyushuo, foo: function() { console.log(this.name); //heyushuo } }; obj.foo();
对象属性引用链中只有上一层或者说最后一层在调用中起作用。
var obj = { name: "heyushuo", obj1: { name: "kebi", foo: function() { console.log(this.name); // kebi } } }; obj.obj1.foo();
隐式丢失
被隐式绑定的函数会丢失绑定对象,而应用默认绑定,把 this 绑定到全局对象或者 undefined(严格模式) 上。
第一种
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函数别名! bar();
虽然 bar 是 obj.foo 的一个引用,但是实际上,它引用的是函数本身,因此此时的bar() 其实是一个不带任何修饰的独立函数调用,因此应用了默认绑定。
第二种传入回调函数时:
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函数别名! function doFoo(fn) { fn(); // <-- 调用位置! } doFoo(bar); //global //和下边这种一样 setTimeout(obj.foo, 300);
1.3 显示绑定
通过 call() 或者 apply()方法。第一个参数是一个对象,在调用函数时将这个对象绑定到 this 上,称之为显示绑定。
function foo() { console.log(this.a); } var obj = { a: 2 }; foo.call(obj); // 2
显示绑定引申出来一个硬绑定,代码如下
function foo(something) { console.log( this.a, something ); return this.a + something; } // 简单的辅助绑定函数 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); //内部已经强制绑定了传入函数this的指向 }; } var obj = { a:2 }; var bar = bind( foo, obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5
bar函数无论如何调用,它总会手动在 obj 上调用 fn,强制把 fn 的 this 绑定到了 obj。这样也解决前面提到的丢失绑定问题
由于硬绑定是一种非常常用的模式,所以在 ES5 中提供了内置的方法 Function.prototype.bind
function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5
1.4 new绑定
使用new来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。
创建(或者说构造)一个全新的对象。
这个新对象会被执行 [[ 原型 ]] 连接。
这个新对象会绑定到函数调用的 this。
如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。
例如:
function foo() { this.name = "heyushuo"; this.age = 25 } foo.prototype.sayName = function(){ console.log(this.name+this.age); } var bar = new foo(); console.log(bar); //{name: "heyushuo", age: 25} //这个新对象会绑定到函数调用的 this。所以此时的this就是bar对象 console.log( bar.age ); // 25
如下图是 new foo() 这个对象
二、四种绑定关系的优先级
判断this,可以按照下面的顺序来进行判断:
1、函数是否在 new 中调用(new 绑定)?如果是的话 this 绑定的是新创建的对象。
var bar = new foo()
2、函数是否通过 call、apply(显式绑定)或者硬绑定调用?如果是的话,this 绑定的是指定的对象。
var bar = foo.call(obj2)
3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 绑定的是那个上下文对象。
var bar = obj1.foo()
4、如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到 undefined,否则绑定到全局对象。
var bar = foo()
以上是“JavaScript中this绑定规则的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。