JavaScript中的this浅谈

YJNldm 发布于2019-08-21 17:52 / 956人阅读

摘要：在函数中调用时指向调用函数的对象，调用函数的在不同情况下有直接调用，此时函数内部的指向全局对象作为对象的方法，此时指向该对象构造函数，此时指向构造的实例对象改变指向是语言的一个关键字。但是有一个总的原则，那就是指的是，调用函数的那个对象。

this在全局中调用时指向的是全局对象。
this在函数中调用时指向调用函数的对象，调用函数的在不同情况下有

1.直接调用，此时函数内部的this指向全局对象
2.作为对象的方法，此时this指向该对象
3.构造函数，此时this指向构造的实例对象
4.call/apply改变this指向

this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

　　function test(){
　　　　this.x = 1;
　　}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象global/window(在浏览器中全局对象即顶层对象指的是window，在nodejs中全局对象指的是global)。
请看下面这段代码，它的运行结果是1。

　　function test(){
　　　　this.x = 1;
　　　　alert(this.x);
　　　　alert(this === window);
　　test(); 
    // 1
    //true

为了证明this就是全局对象，我对代码做一些改变：

　　var x = 1;
　　function test(){
　　　　alert(this.x);
　　}
　　test(); // 1

运行结果还是1。再变一下：

　　var x = 1;
　　function test(){
　　　　this.x = 0;
　　}
　　test();
　　alert(x); //0

当调用函数test()后，执行this.x 语句，而这里的this.x指向的是全局的x，所以全局的x=1在这个时候变成x=0,所以在最后alert(x)的时候数据0。
从这里可以看出函数里的 this.x 指的是全局变量x里吧。

那如果是带有参数的函数呢？再来看看下面的例子：

var a = 20;
function fun(a){
    this.a = 1;
    console.log(a);
    console.log(this.a);
};
fun(10); 
//10
//1

当函数带有参数时，this依旧指向全局的变量，与参数没有任何关系，上面的写法就类似于下面的这种写法。

var a = 20;
function fun(b){
    this.a = 1;
    console.log(b);
    console.log(this.a);
};
fun(10); 
//10
//1

如果把this.a改成this.b呢？那this.b指向的是全局的变量还是函数里面的变量呢？

var a = 20;
function fun(b){
    this.b = 1;            //没有用var 相当于定义了一个全局变量b，并赋值为1
    console.log(b);        //10 打印出传入的参数b
    console.log(this.b);   //1  打印出全局变量b
};
fun(10);
console.log(b); //1 打印出全局变量b

JavaScript里规定，全局函数里没有用var定义的的变量是全局变量，所以这里的this.b就相当于定义了一个全局的变量b，所以在最后能打印出变量b

现在你能看懂下面两个函数了吧

var a = 20;
function fun(a){
    this.a = 1;
    console.log(a)
};
console.log(a);//20 没有执行this.a=1 语句时，全局变量a依旧为20
fun(10);//10

var a = 20;
function fun(a){
    this.a = 1;
    console.log(a)
};
fun(10);//10
console.log(a);//1 执行this.a=1 语句后，全局变量a变为1

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

　　function test(){
　　　　alert(this.x);
　　}
　　var o = {};
　　o.x = 1;
　　o.m = test;
　　o.m(); // 1

或者用对象字面量来创建方法是好理解些，但都是一个意思

var pet = {
    words : "my dear",
    speak : function(){
        console.log(this.words);   //my dear
        console.log(this === pet); //true
    }
}

pet.speak();

情况三作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

　　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

运行结果为2，表明全局变量x的值根本没变。
再来看一个在实际应用中的例子

function Pet(words){
    this.words = words;

    this.speak = function(){
        console.log(this.words);
        console.log(this)
    }
}

var cat = new Pet("Miao");
cat.speak();
//当nwe了一个实例对象cat后，cat拥有了自己的word属性和speak方法，而cat.speak()调用时this指的的是cat对象自己
// Miao
//Pet { words: "Miao", speak: [Function] }

情况四 apply、call调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。
　　var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test;
　　o.m.apply(); //0
apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
如果把最后一行代码修改为
　　o.m.apply(o); //1
运行结果就变成了1，证明了这时this代表的是对象o。

apply有两种实际的应用场景：
1.在对象中--调用时才改变this指向，如上例子，也许下面的例子好理解些

var pet = {
    words : "my dear",
    speak : function(say){
        console.log(say + " " +this.words)
    }
}

pet.speak("hello");//hello my dear

//利用apple调用时改变this的指向
var dog = {
    words :"wang"
}
pet.speak.call(dog,"hello");//hello wang
pet.speak("hello")//hello my dear

2.实现继承时的构造函数--定义时改变this指向

function Pets(words,sex){
    this.words = words;
    this.sex = sex;
    this.speak = function(){
        console.log(this.words + " " + this.sex)
    }
}

function Dog(words,sex){
    //Pets.call(this, words, sex);
    //Pets.apply(this,[words, sex])
    Pets.apply(this,arguments)
}

var dog  = new Dog("wang","girl")
dog.speak();//wang,girl

参考资料：
1.《JavaScript的this用法》--阮一峰

服务器托管私有云 javaScript中的this 浅谈javascript js中的this js中的this机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90135.html

浅谈JavaScript中的面向对象

摘要：面向对象面向对象编程的全称是，简称，面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。面向对象编程的三个主要特征是封装继承多态。面向对象面向对象编程的全称是Object Oriented Programming，简称OOP，面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。面向对象编程可以看做是使用一系列对象相互协作的软件设计，面向对象程序设计的目的是在编程中促...

Magicer 2019-08-26 12:10 评论0 收藏0
浅谈JavaScript继承

摘要：组合方式实现继承原型链构造函数喵喵喵汪汪汪与的唯一区别是多了这一句组合方式实现了对构造函数内和原型上所有属性和方法的继承，并且的实例对象之间也不会相互干扰。前言关于JavaScript继承相关的定义和方法网上已经有很多解释啦，本菜鸟就不抄抄写写惹人嫌了，本文主要探讨三种基本的继承方式并且给出优化方案。正文借助构造函数实现继承 function Parent1() { ...

Jingbin_ 2019-08-21 16:55 评论0 收藏0
浅谈 javascript 中的this绑定问题

摘要：绑定使用方式进行调用函数时，会发生构造函数的调用。先上图，然后根据文字阅读使用调用函数之后，该函数才作为构造函数进行调用，构造一个全新的对象赋值给，而对象的指向了的对象，的对象有一个属性指向的构造函数这个就是的原型链，也是的特性。 javascript语言是在运行时前即进行编译的，而this的绑定也是在运行时进行绑定的。也就是说,this实际上是在函数被调用时候发生绑定的，它指向什么完...

duan199226 2019-08-22 16:18 评论0 收藏0
浅谈JavaScript原型链

摘要：在这其中我们就逃不开要讨论继承原型对象构造函数实例了。想要获得某一类型的构造函数可以用来获得，也可以对该属性进行赋值操作。三上面就提到一点是指构造函数的原型对象，它是一个对象，它是构造函数的属性。原型链这一个话题，需要和很多概念一起讲，才能串成一个比较系统的知识点。在这其中我们就逃不开要讨论继承、原型对象、构造函数、实例了。一、构造函数构造函数是一类特殊的函数，它的作用是用来生成...

xumenger 2019-08-23 14:31 评论0 收藏0
浅谈OOP Javascript [1]

摘要：工厂模式优点集中实例化，可以传参等缺点分不清属于哪个对象我们先来谈谈优点，看例子集中实例化返回实例化对象返回返回不难看出，工厂模式比上面的例子减少了很多代码。 ECMAscript开发的两种模式：1.过程化 2.OOP(面向对象) 面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性的方法的对象。但是ECMAscript中没有类的概念！又谈作用域首先...

xinhaip 2019-08-20 12:31 评论0 收藏0
浅谈OOP Javascript [2] -- 构造函数

摘要：构造函数上一章我们讲了工厂模式，它的缺点就是无法识别到底哪个属于哪个的问题。我们可以用构造函数来解决这个识别问题。来比较构造函数内的值就可以看出到底是什么类型。构造函数上一章我们讲了工厂模式，它的缺点就是无法识别到底哪个属于哪个的问题。我们可以用构造函数来解决这个识别问题。 //构造函数 function Create(a,b) { this.a =a; this...

didikee 2019-08-20 12:35 评论0 收藏0