this
只有在运行时才能确认值,定义时无法确认值。(根据其所在的运行环境,重要!!!)
例:
var a = {
age:12,
fn:function(){
console.log(this.age)
}
}
① a.fn() //this === a
② a.fn.call({age:13}) //this === {age:13}
③ var f1 = a.fn
f1(); //this === window
this的使用场景
① 在构造函数中使用
this代表new出来的对象
function Foo(){
this.b = 10;
console.log(this);//Foo {b:10}
}
var foo = new Foo();
console.log(foo.b)//10
② 在普通函数中使用
在全局环境中,this 永远指向 window。
var a = 10;
function foo(){
console.log(this) //window
console.log(this.a)//10
}
foo();
③ call bind apply
当一个函数被 call、apply 或者 bind 调用时,this 的值就取传入的对象的值。
var obj = {
a:10
}
function foo(){
console.log(this)//{a:10}
console.log(this.a)
}
foo.call(obj)
foo.apply(obj)
foo.bind(obj)
④ 在对象方法中的this
如果函数作为对象的方法时,方法中的this指向该对象
var obj = {
a:12,
foo:function(){
console.log(this)//obj
}
}
obj.foo();
如果在对象方法中定义函数,情况有所不同
var obj = {
a:12,
foo:function(){
console.log(this)//obj
function f(){
console.log(this)//window
}
f();
}
}
obj.foo();
var obj = {
a:12,
foo:function(){
console.log(this)//obj
var obj2 = {
b:45,
foo2:function(){
function f(){
console.log(this)//window
}
f();
}
}
obj2.foo2();
}
}
obj.foo();
⑤ 箭头函数中的this
词法作用域,由上下文决定:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
var obj = {
d:42,
foo:() => {
var fn = () => {
return ()=> {
console.log(this)//继承自父级上下文 window
}
}
fn()();
}
}
obj.foo()
var obj = {
d:42,
foo:function() {
var fn = () => {
return ()=> {
console.log(this)//继承自父级上下文 obj
}
}
fn()();
}
}
obj.foo()
小结例题
例一:
var user = {
count : 1,
getCount: function(){
return this.count;
}
}
var func = user.getCount
console.log(func())//undefined
例二:
var baidu = {
count: 2,
getBaiduCount: function() {
return this.count;
}
};
console.log(baidu.getBaiduCount());//2
var func = baidu.getBaiduCount;
console.log(func());//undefined
例三:
var myObject={
foo:"bar",
func:function(){
var self=this;
console.log("outer func: this.foo="+this.foo);//bar
console.log("outer func: self.foo="+self.foo);//bar
(function(){
console.log("inner func: this.foo="+this.foo);undefined
console.log("inner func: self.foo="+self.foo);//bar
}());
}
};
myObject.func()
例四:
(function(){
eval("console.log(this)");
})();
function Foo(){
this.bar = function(){
eval("console.log(this)"); // 指向这个function
}
}
var foo = new Foo();
foo.bar();
例五:
function someFun(x) {
this.x = x;
}
someFun(5);
console.log(x);//5
例六:
function Student(name){
this.name = name;
}
var s1 = new Student('若川');
Student.prototype.doSth = function(){
console.log(this.name);
}
s1.doSth(); // '若川'
例七:
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
console.log(this.x);
console.log(this.y);
}
};
point.moveTo(1, 1)//1,1
例八:
var a = 10;
var foo = {
a: 20,
fn: (function(){
console.log(this); //window
console.log(this.a); //10
})()
}
例九:
var a = 10;
var foo = {
a: 20,
fn: function(){
console.log(this.a);
}
};
var bar ={
a: 30
}
foo.fn.apply();//10
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30
例十:
var length = 10;
function fn () {
console.log(this.length);
}
var obj = {
length: 5,
method: function (fn) {
fn.call(this);
}
};
obj.method(fn);//5