执行上下文中有一个对this的赋值,接下来学习一下this,因为在函数中用的非常多
this的精髓在于,在函数定义时无法确定this的值,只有当函数真正被调用执行时才能确定值。
1.构造函数
function fn() {
this.a = 1
this.b = 2
console.log(this) //fn {a: 1, b: 2}
}
var f = new fn()
console.log(f.a) //1
当函数被当做构造函数使用时,this指的是他new出来的对象
但是如果直接调用这个函数
function fn() {
this.a = 1
this.b = 2
console.log(this) //Window {speechSynthesis: SpeechSynthesis,
}
fn()
this是windows
2.函数作为对象的一个属性
var obj = {
x: 10,
fn: function () {
console.log(this) //Object {x: 10}
console.log(this.x) //10
}
}
obj.fn()
这是是由obj这个对象调用的fn,所以this是obj这个对象,其实已经隐约感觉出来了,谁调用了这个函数,this就是谁
如果不是用obj调用的呢
var obj = {
x: 10,
fn: function () {
console.log(this) //windows
console.log(this.x) //undefined
}
var f = obj.fn
f()
此时我们定义了一个变量f,将fn赋值给他,由他调用fn,结果this是windows
这个意思是不是说f是全局变量呢,所以this是windows
再来看一个更复杂的
var obj = {
x: 10,
fn: function () {
console.log(this)
console.log(this.x)
}
}
var test = function () {
}
test.prototype.f = obj.fn
test.prototype.f() //Object {} //undefined
var t = new test() //test {} //undefined
t.f()
我定义了一个函数,将这个函数的f属性通过原型赋值为fn,然后分别通过test和test new出来的对象调用fn这个函数,结果可见:当用test时,this指的是Object,而对象时则是我们定义的test(),也就是说去找调用他的对象的父类型。
3.全局、调用普通函数
var x = 10
var fn = function () {
console.log(this) //windows
console.log(this.x) //10
}
fn()
这个全局调用很明显
看一个复杂的
var obj = {
x: 10,
fn: function () {
function f() {
console.log(this) //windows
console.log(this.x) //undefined
}
f()
}
}
obj.fn()
可能你以为是obj,但是仔细看看真正调用f的地方是fn内部的f(),也就是说f是被全局调用了,fn这个函数中的this就是指的obj了