javascript之this详解

最新推荐文章于 2025-08-03 11:13:21 发布

原创最新推荐文章于 2025-08-03 11:13:21 发布 · 529 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

js 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析JavaScript中this的特性，包括其在不同场景下的指向变化，如普通函数调用、作为对象方法调用、构造函数调用及通过call、apply函数调用的变化，并通过实例说明每个场景下this的行为。

javascript的this不同于java、php等的this，javascript的this灵活多变比较复杂，下面就一一介绍不同情况下的this。

1.函数作为普通函数调用时，this指向window,准确的说this为null，但被解释成window。下面看一个例子

console.log(window.xx);//undefined
function t(){
    this.xx  = 'jhon';
}
t();
console.log(window.xx);//jhon

2.函数作为对象的方法来调用时，this指向方法的调用者，即母体对象，不管被调用函数声明时属于谁。下面看一个例子证明这一点。

var obj = {name:'name',age:2,t:function(){console.log(this.name)}};
var dog = {name:'wangcai'};
dog.t = obj.t;
dog.t();
/*结果打印的是wangcai*/

3.函数作为构造函数调用时，请看下面分析的例子

function Dog(name,age){
    this.name = name;
    this.age = age;
    this.bark = function(){
        console.log("i am " + this.name);    
    }
}

var dog = new Dog('huzi',2);
dog.bark();
/*
结果为：i am huzi
结果分析
new Dog发生了以下几个步骤：
a.系统创建空对象{}（空对象constructor属性指向Dog函数）
b.把函数的this指向空对象
c.执行该函数
d.返回该对象
*/

function Dog(name,age){
    this.name = name;
    this.age = age;
    this.bark = function(){ 
    }
    return 'abc';
}

var dog = new Dog('huzi',2);
console.log(dog);
/*
上面的dog是什么呢？
经过打印可以知道dog仍热是一个对象，而不是'abc'.因此在构造函数中return的值是忽略的，还是返回对象。
*/

4.函数通过call、apply调用其中this也要发生变化。

call函数语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) arg1...argN可以是任意类型。

apply函数语法：apply([thisObj[,argArray]]) 第二个参数是一个数组。

call和apply用法和意义一样，下面对call进行解释：

fn.call(对象obj，参数1，参数2...参数n)

运行如下:

a).fn函数中的this指向对象obj

b).运行fn（参数1，参数2...参数n）；

具体例子：

function Animal(){
    this.name = 'Animal';
    this.showName = function(){
        console.log(this.name);
    }
}
function Dog(){
    this.name = 'dog';
}
var animal = new Animal();
var dog = new Dog();
animal.showName.call(dog);
/*
结果：dog
*
/

下面看几个例子巩固一下:

xx = "this is window";
var dog = {xx:'dog',showName:function(){console.log(this.xx);}};
var temp = dog.showName;
temp();
/*结果：this is window*/

xx = "this is window";
var dog = {xx:'dog',showName:function(){console.log(this.xx);}};
var cat = {xx:'cat'};
(cat.showName = dog.showName)();
/*结果：this is window */

请思考一个问题：有this操作的，（如this.age = XX）的函数不能直接调用而是要new来调用？这个说法是对的，因为直接调用的this指向window，将会污染全局变量。