首页

聊聊JS中的this对象

kkcode
2018-08-16  阅读 125

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获取答案】 【你的答案是?试试柳岩(留言)吧】

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】