前言
前端编程对于this
再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this
原理,敬请出门左拐。对于理解this
似懂非懂的同学可以借鉴一波
1.this描述
this
指的是当前执行环境上下文,只要牢牢抓住这一点就能找到this
的根源,this.function
、this.property
就能准确定位实际对象。
2.this绑定规则
window 绑定
function sayAge () {
console.log(this.age);
}
var user = {
name: 'ccy',
age: 18
}
sayAge()复制代码
输出结果为undefined
,仔细思考当前函数执行的上下文,其实等价于window.sayAge()
this
默认绑定在window
全局对象上
隐式绑定
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo();复制代码
这段代码this
绑定到了obj
对象,当函数引用有上下文对象context
时,隐式绑定规则会把this
绑定到这个上下文对象
再看看隐式丢失问题
var bar=obj.foo;
bar();复制代码
输出undefined
,因为此时执行上下文为全局对象,没有a
属性
显式绑定
在分析隐式绑定时,必须将函数作为对象的属性,从而将此对象绑定在函数的执行上下文,但想想是不是很麻烦,显示绑定可解决此问题。
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj );复制代码
用函数原型属性 call
、apply
、bind
都可以实现
Function.prototype.call=function(ctx,arg1,arg2,/*...*/argN){native code}
Function.prototype.apply=function(ctx,arrys){native code}
Function.prototype.bind=function(ctx){native code}复制代码
当然这些函数原型属性都可以重写以实现自己的需求,call
和apply
的区别仅仅在于第二个参数开始apply
传递数组,call
是将参数一个个传递,call
与bind
的区别在于bind
不能立即执行。
new 绑定
其实每当用 new
调用函数时,JavaScript
解释器都会在底层创建一个全新的对象并把这个对象当做 this
。如果用 new
调用一个函数,this
会自然地引用解释器创建的新对象。
function User (name, age) {
/*
JavaScript 会在底层创建一个新对象 `this`,它会代理不在 User 原型链上的属性。
如果一个函数用 new 关键字调用,this 就会指向解释器创建的新对象。
*/
this.name = name
this.age = age
}
var me = new User('ccy', 18)复制代码
如果要判断一个运行中函数的this
绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this
的绑定对象。