| <!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="utf-8"> |
| |
</head> |
| |
<body> |
| |
</body> |
| |
</html> |
| |
<script> |
| |
// 当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数, |
| |
// 最后直到window,全局变量默认挂载在window对象下 |
| |
|
| |
function a(){ |
| |
var user = "追梦子"; |
| |
console.log(this); |
| |
console.log(this.user); |
| |
|
| |
} |
| |
// a(); |
| |
|
| |
|
| |
var o = { |
| |
user:"追梦子", |
| |
fn:function(){ |
| |
console.log(this); |
| |
console.log(this.user); |
| |
} |
| |
} |
| |
// o.fn(); |
| |
|
| |
|
| |
|
| |
var o = { |
| |
a:10, |
| |
b:{ |
| |
a:12, |
| |
fn:function(){ |
| |
console.log(this); |
| |
console.log(this.a); |
| |
|
| |
} |
| |
} |
| |
} |
| |
// o.b.fn(); |
| |
|
| |
|
| |
var o = { |
| |
a:10, |
| |
b:{ |
| |
|
| |
fn:function(){ |
| |
console.log(this); |
| |
console.log(this.a); |
| |
} |
| |
} |
| |
} |
| |
// o.b.fn(); |
| |
|
| |
|
| |
var o = { |
| |
c:10, |
| |
b:{ |
| |
c:12, |
| |
fn:function(){ |
| |
console.log(this); |
| |
console.log(this.c); |
| |
|
| |
} |
| |
} |
| |
} |
| |
|
| |
var j = o.b.fn; |
| |
// j(); |
| |
|
| |
|
| |
var obj = { |
| |
say: function () { |
| |
|
| |
setTimeout(function () { |
| |
console.log(this); |
| |
}); |
| |
// setInterval(function(){ |
| |
// console.log(this); |
| |
// }, 1000); |
| |
} |
| |
} |
| |
// obj.say(); |
| |
|
| |
|
| |
// 匿名函数,定时器中的函数,由于没有默认的宿主对象,所以默认this指向window |
| |
// 用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this来保存我们需要的this指针! |
| |
var obj = { |
| |
func: function() { |
| |
console.log('func'); |
| |
}, |
| |
say: function () { |
| |
var that = this; //此时的this就是obj对象 |
| |
setTimeout(function () { |
| |
console.log(this);//window |
| |
console.log(that); |
| |
that.func(); |
| |
}); |
| |
} |
| |
} |
| |
// obj.say(); |
| |
|
| |
|
| |
// 箭头函数 |
| |
//this生来局部 |
| |
/* |
| |
箭头函数相当于匿名函数,箭头函数根据当前的词法作用域而不是根据this机制顺序来决定this， |
| |
所以，箭头函数会继承外层函数调用的this绑定，而无论this绑定到什么 |
| |
|
| |
*/ |
| |
// |
| |
// |
| |
var a = 0; |
| |
function Foo(){ |
| |
console.log(this); |
| |
var test = () => { |
| |
console.log(this);//obj |
| |
console.log(this.a); |
| |
var text=()=>{ |
| |
console.log(this);//obj |
| |
console.log(this.a); |
| |
} |
| |
text(); |
| |
} |
| |
test(); |
| |
}; |
| |
var obj = { |
| |
a : 2, |
| |
foo:Foo |
| |
} |
| |
obj.foo();//2 |
| |
|
| |
|
| |
// var test = () => { |
| |
// console.log(this.a); |
| |
// } |
| |
// //形式上等价于 |
| |
// var test = function(){ |
| |
// console.log(this.a); |
| |
// } |
| |
// //实质上等价于 |
| |
// function fn(){ |
| |
// var that = this; |
| |
// var test = function(){ |
| |
// console.log(that.a); |
| |
// } |
| |
// } |
| |
|
| |
|
| |
|
| |
var obj = { |
| |
say: function () { |
| |
setTimeout(() => { |
| |
console.log(this); |
| |
}); |
| |
} |
| |
} |
| |
// obj.say(); //this->obj |
| |
|
| |
|
| |
var obj = { |
| |
say: function () { |
| |
var f1 = function () { |
| |
console.log(this); // window, f1调用时,没有宿主对象,默认是window |
| |
setTimeout(() => { |
| |
console.log(this); // window 箭头函数在定义的时候它所处的环境相当于是window所以在箭头函数内部的this函数window |
| |
}) |
| |
}; |
| |
f1(); |
| |
} |
| |
} |
| |
// obj.say(); |
| |
|
| |
|
| |
|
| |
// 构造函数版this： |
| |
|
| |
function Fn(){ |
| |
this.user = "追梦子"; |
| |
this.aa='bb'; |
| |
console.log(this); |
| |
} |
| |
// var a = new Fn(); |
| |
// console.log(a.user); |
| |
|
| |
|
| |
function fn() |
| |
{ |
| |
this.user = '追梦子'; |
| |
return {name:'lisi'}; |
| |
|
| |
} |
| |
// var a = new fn(); |
| |
// console.log(a.user); //undefined |
| |
// console.log(a); |
| |
|
| |
|
| |
function fun() |
| |
{ |
| |
this.user = '追梦子'; |
| |
// return 1; |
| |
// return undefined; |
| |
return null; |
| |
|
| |
} |
| |
// var a = new fun(); |
| |
// console.log(a.user); //追梦子 |
| |
// console.log(a); |
| |
|
| |
// 如果返回值是一个对象，那么this指向的就是那个返回的对象， |
| |
// 如果返回值不是一个对象那么this还是指向函数的实例。 |
| |
// 还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。 |
