聊聊JS中的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获取答案】 【你的答案是？试试柳岩（留言）吧】