博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中的this
阅读量:6584 次
发布时间:2019-06-24

本文共 2483 字,大约阅读时间需要 8 分钟。

JS JavaScript中的this

thisJavaScript语言中的一个关键字 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。

function test() { this.x = 1;}复制代码

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

情况一:纯粹的函数调用

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

var x = 1;function test() {   console.log(this.x);}test();  // 1复制代码
情况二:作为对象的方法调用

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

function test() {  console.log(this.x);}var obj = {};obj.x = 1;obj.m = test;obj.m(); // 1复制代码
情况三:作为构造函数调用

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

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

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

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

运行结果为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() // 0复制代码

apply()的参数为空时,默认调用全局变量。因此,这时运行结果为0,证明this指的是全局对象。 如果把最后一行代码修改成

obj.m.apply(obj); //1复制代码

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

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

  • 使用ES6的箭头函数
  • 在函数内部_this=this
  • 使用applycallbind
  • 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()复制代码

转载地址:http://iuano.baihongyu.com/

你可能感兴趣的文章
Navicat for MySQL 使用SSH方式链接远程数据库(二)
查看>>
poj 1274The Perfect Stall
查看>>
HDU 4720 Naive and Silly Muggles (外切圆心)
查看>>
垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
查看>>
Ubuntu上运行Blender,在控制台上查看运行结果
查看>>
怎么检查网站的死链接呢?
查看>>
scrapy爬虫框架实例一,爬取自己博客
查看>>
React是UI的未来吗?
查看>>
中国人社部:2018年15个省(区、市)调整最低工资标准
查看>>
手把手教你通过Thrift 访问ApsaraDB for HBase
查看>>
MacOS安装MySQL 报错
查看>>
Vue+webpack+Element 兼容问题总结
查看>>
复杂recyclerView封装库
查看>>
见微知著 —— Redis 字符串内部结构源码分析
查看>>
Command './js-ant' failed to execute
查看>>
阿里云NFS NAS数据保护实战
查看>>
Spring cloud配置客户端
查看>>
Android API中文文档(111) —— MailTo
查看>>
Linux 中如何卸载已安装的软件
查看>>
thinkphp 3.2 增加每页显示条数
查看>>