this是JavaScript语言中的一个关键字

它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。

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

上面代码中,函数test运行时,内部会自动有一个this对象可以使用。

那么,this的值是什么呢?

函数在不同使用场合,this有不同的值。总之,this就是函数运行时所在的环境对象。

情况一:纯粹的函数调用

这是函数的最常通用法,属于全局性调用,因此this就代表全局对象。

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

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

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

function test() {
console.log(this.x);
} var obj = {};
obj.x = 1;
obj.m = test; obj.m(); //

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

构造函数就是通过这个函数可以生成一个新对象。这时,this就指这个新对象

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

为了表明这时this不是全局对象,下面代码:

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

运行结果为2,表明全局变量x的值没有变化

情况四:apply调用

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

var x = 0;
function test() {
 console.log(this.x);
} var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() //

apply()的参数为空时,默认调用全局变量。因此,这时运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改成

obj.m.apply(obj); //

运行结果就变成1,证明这时this代表的对象是obj

改变this的指向有以下几种方法

使用ES6的箭头函数

在函数内部_this=this

使用apply、call、bind

new实例化一个对象

其实this的指向,始终坚持一个原理:this永远指向最后调用它的那个对象。

几个例子:

例1:

    var name = "windowsName";
function a() {
var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window

这里我们没有使用严格模式,如果使用严格模式的话,全局对象就是 undefined,那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined

例2:

    var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
a.fn();

例3:

var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
window.a.fn();

例4:

    var name = "windowsName";
var a = {
// name: "Cherry",
fn : function () {
console.log(this.name); // undefined
}
}
window.a.fn();

例5:

    var name = "windowsName";
var a = {
name : null,
// name: "Cherry",
fn : function () {
console.log(this.name); // windowsName
}
} var f = a.fn;
f();

为什么不是 Cherry,这是因为虽然将 a 对象的 fn 方法赋值给变量 f 了,“this 永远指向最后调用它的那个对象”,由于刚刚的 f 并没有调用,所以 fn() 最后仍然是被 window 调用的。所以 this 指向的也就是 window。

例6:

    var name = "windowsName";

    function fn() {
var name = 'Cherry';
innerFunction();
function innerFunction() {
console.log(this.name); // windowsName
}
} fn()

JS JavaScript中的this的更多相关文章

  1. [js]javascript中4种异步

    javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...

  2. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. js | JavaScript中数据类型转换总结

    转载 在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = “123”; a = Number(a); ...

  4. JS JavaScript中的文档碎片 DocumentFragement JS性能优化

    文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...

  5. JavaScript中解析JSON --- json.js 、 json2.js 以及 json3.js的使用区别

    JSON官方(http://www.json.org/)提供了一个json.js,json.js是JSON官方提供的在JavaScript中解析JSON的js包,json.js.json2.js.js ...

  6. javascript中外部js文件取得自身完整路径得办法

    原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...

  7. js架构设计模式——理解javascript中的MVVM开发模式

    理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...

  8. JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换

    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...

  9. JavaScript进阶(二)在一个JS文件中引用另一个JS文件

    在一个JS文件中引用另一个JS文件       转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...

随机推荐

  1. nyoj 220——推桌子——————【贪心】

    推桌子 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 The famous ACM (Advanced Computer Maker) Company has re ...

  2. nyoj 983 ——首尾相连数组的最大子数组和——————【最大子串和变形】

    首尾相连数组的最大子数组和 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给定一个由N个整数元素组成的数组arr,数组中有正数也有负数,这个数组不是一般的数组,其首 ...

  3. Node.js之Buffer

    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存 ...

  4. DJango小总结二

    1.Django请求的生命周期    武彦涛:        路由系统 -> 试图函数(获取模板+数据=>渲染) -> 字符串返回给用户        2.路由系统    王腾:   ...

  5. CSS Hack兼容

    CSS中有很多标签在不同浏览器中有不同的兼容性问题,问了让网页的功能更好的不同浏览器中显示正常, 需要通过hack的方式来解决浏览器兼容问题. CSS hack问题由来已久,目前我的了解甚少,以下是转 ...

  6. web应用和http协议

    一.web应用 Web应用程序是一种可以通过Web访问的应用程序: 程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式C/S.B/S. 1.C/ ...

  7. javascript统计一个字符在一段字符串出现次数

      <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" ...

  8. 30 Excellent WordPress Video Tutorials

    http://sixrevisions.com/wordpress/30-excellent-wordpress-video-tutorials/ WordPress是一种使用PHP语言开发的博客平台 ...

  9. IS Decisions如何帮助企业提高安全标准

    PCI DSS标准有什么要求? 简单地说,PCI DSS要求最高级别的网络安全性.这一标准如今广泛应用于需要存储.管理.传输客户(或持卡人)个人数据的行业和领域. 施行严格的访问监控措施 为了保证关键 ...

  10. 03_CronTrigger

    [Cron表达式] Quartz使用类似于Linux下的Cron表达式定义的时间规则,Cron表达式由6到7个空格分隔的时间字段组成. [ 字符说明 ] * :可以用在所有字段中,表示对应时间域内的每 ...