聊聊this

this的四种调用方式

1.普通函数来调用
2.作为对象的方法来调用
3.函数作为构造函数调用时
4.函数通过call，apply调用时

第一种

1.普通函数来调用

this的值指向->window
准确的说this为null，但被解释为window
在ECMAscript5标准中，如果this为null，则被解释为undefined。

console.log(window.x); //undefined
function t(){
    this.x=333;
}
t();
console.log(window.x); // 333

第二种

2.作为对象的方法来调用

this指向方法的调用者，即母体对象。

var obj={
    xx: 999,
    yy: 888,
    t: function(){
        console.log(this.xx);
    }
}

obj.t(); // 999

var dog = {xx:'wangwang'};
dog.t = obj.t;
dog.t(); // wangwang

show = function(){
    console.log(this.xx);
}
dog.t = show;
dog.t();//wangwang

第三种

3.函数作为构造函数调用时

js中没有类的概念，
创建对象使用构造函数来完成的，
或者直接用json格式{}来写。

function Dog(name,age){
    this.name=name;
    this.age=age;
    this.back=function(){
        alert('This is '+this.name+'!');
    }
}
var dog = new Dog('Huzi',2);
dog.back(); // This is Huzi

new Dog 发生了以下几个步骤：
a：系统创建空对象{},(空对象constructor的属性指向Dog函数，)
b：把函数的this指向该空对象Dog
c：执行该函数
d：返回该对象

下面的代码运行结果返回的是什么？

function Pig(){
    this.age=99;
    return 'abc';
}
var pig = new Pig();
console.log(pig);

答：返回pig对象，
因为函数作为构造函数运行时，
return的值是忽略的，还是返回对象。

第四种

4.函数通过call，apply调用时

语法格式：fun.call(对象，参数1，参数2···参数n);

function t(num){
    alert('我的真实年龄是' + this.age);
    alert('但我一般告诉别人我' + (this.age + num));
}
var humen = {name:'Ke',age:23};
humen.t = t;

//this指向humen，但是humen多了一个方法属性
humen.t(-10);

//接下来，我们不把t赋值给humen的属性，也能把this指向humen。
var wangwu = {name:'wangwu',age:30};

t.call(wangwu,5);

总结

this的指向：
1.普通函数中的this指向全局对象window
2.构造函数内部this指向新创建出来的对象
3.对象方法内的this指向的是调用该方法的对象
4.call，apply，bind可以改变this的指向

练习

name = 'this is window';
var obj = {
    name:'php',
    t:function(){alert(this.name)}
};
var dog = {name:'huzi'};

obj.t(); // 输出什么？

dog.t=obj.t;
dog.t(); // 输出什么？

var tmp = dog.t;
tmp(); // 输出什么？

(dog.t = obj.t)(); // 输出什么？

dog.t.call(obj); // 输出什么？

【留言提交答案吧】
【微信公众号：qdgithub】
【答案：回复this获取答案】