本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

this是JavaScript的一个关键字,它代表函数运行时自动生成的一个内部对象,只能在函数内部使用,比如:

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

随着函数使用场合的不同,this的指向会发生变化。但有一个总的原则就是,this指向最后一个调用函数的那个对象。

下面分四种情况,讨论一下this的用法;

情况一:纯粹的函数调用

这是函数通常用法,属于全局性调用,this指向全局对象;

下面这段代码运行结果为1:

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

此处运行结果为1,我开始以为当前的this指向的是函数本身,其实指向的是全局对象

代码做下面处理:

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

全局中定义一个x变量,在函数内部使用this.x结果是1;

再变一下:

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

全局变量x的值在函数内部被改变。

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

函数还可以作为某个对象方法的调用,这时this指向的就是引用它的对象;

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

情况三:作为构造函数调用

所谓构造函数,就是通过这个函数生成一个对象,这时this就是指向这个新对象;

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

还是跟上面一样,我在函数内部改变一下全局变量的值,看是否能够成功:

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

从上面代码可以看到构造函数中的this只指向生成的对象,无法改变全局变量。

情况四:apply调用

apply()是函数对象的一个方法,它的作用是改变函数调用的对象,它的第一个参数就是表示调用这个函数的对象,因此this指向的就是第一个参数;

var x = 1;
function test () {
alert(this.x)
}
var o = {};
o.x = 2;
o.m = test;
o.m.apply(); // 1,apply()函数参数为空时默认调用全局对象,因此,此时运行的结果为1,证明this指向全局对象
o.m.apply(o); // 2,此时this指向对象o

最后用代码解释一下为什么说this指向最后调用它的对象

var a = 666;
var o = {
a: 1,
b: {
a: 2,
fn: function () {
console.log(this.a)
}
}
}
o.b.fn(); // 2,此时调用函数的对象是a对象中的b对象,所以运行结果为2
var test = o.b.fn; // 这只是一个赋值的过程,并没有执行
test(); // 666,此时调用test()方法的是全局对象

javascript中this指向问题的更多相关文章

  1. 图解javascript中this指向

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...

  2. 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

    JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...

  3. 关于javascript中this 指向的4种调用模式

    this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...

  4. javascript中this指向的问题

    javascript中this只有函数执行时候才能确定到底指向谁,实际this最终指向是那个调用它的对象. 1,匿名函数中的this——window function foo(){ var lastN ...

  5. JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  6. javascript中this指向

    在简单函数中,this是指向当前对象,可用来获取当前对象某个属性,但随着函数变复杂,this很多情况不指向当前对象,而是指向window. 1.在独立调用函数中,具有全局执行环境,this指向wind ...

  7. javascript中constructor指向问题

    首先用一个例子指出来constructor存在形式. function Fruit(){ } var f=new Fruit(); console.log(f.constructor);//打印出Fr ...

  8. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  9. 图解avaScript中this指向(超透彻)

    一个图讲清楚JavaScript中this指向: 说明: (1)严格模式下,禁止this关键字指向全局对象会报错. (2)闭包中的this对象具有全局性,因此通常指向window.  (3)优先级:n ...

随机推荐

  1. 编写Qt Designer自定义控件

    一)流程概述 在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等.虽然Qt Designer里的控件可以满 ...

  2. springboot开启access_log日志输出

    由于在调试时需要查看access_log日志,但是springboot默认并没有开启,因此查看了一下文档,在springboot的配置文件中添加如下设置,即可将日志输出当磁盘文件中以供查看. #日志开 ...

  3. Code Review 程序员的寄望与哀伤【转载】

    一个程序员,他写完了代码,在测试环境通过了测试,然后他把它发布到了线上生产环境,但很快就发现在生产环境上出了问题,有潜在的 bug. 事后分析,是生产环境的一些微妙差异,使得这种 bug 场景在线下测 ...

  4. [Link-Cut-Tree]【学习笔记】

    可以按照<Utopiosphere>的调唱出来 “Link-Cut ,Time doesn’t stop .Prepare your doubts ,Eat them up” 参考资料: ...

  5. 【Java学习笔记之十五】Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  6. [51nod1357]密码锁

    有一个密码锁,其有N位,每一位可以是一个0~9的数字,开启密码锁需要将锁上每一位数字转到解锁密码一致.这个类似你旅行用的行李箱上的密码锁,密码锁的每一位其实是一个圆形转盘,上面依次标了0,1,...9 ...

  7. 换行符 '\n' 和 回车符 '\r' 的区别?

    顾名思义: 换行符就是另起一新行,光标在新行的开头: 回车符就是光标回到一旧行的开头:(即光标目前所在的行为旧行) ------------------------------------------ ...

  8. qt creator 中的"提升为..."功能简介

    1.新建一个项目 2.打开文件:mainwindow.ui ->拖一个 tree widget 控件到画布->右击弹出对话框->单击"提升为..."选项 3.输入 ...

  9. typedef和define具体的详细区别

    1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...

  10. 微信小程序实现淡入淡出效果(页面跳转)

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...