博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中的this基本问题<转>
阅读量:6977 次
发布时间:2019-06-27

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

在函数中 this 到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了。 

执行上下文环境 :

 **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this。

 **作用**:用来保存本次运行时所需要的数据

当你在代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻。

关于 this 的取值,大体上可以分为以下几种情况:

情况一:全局 & 调用普通函数

在全局环境中,this 永远指向 window。

console.log(this === window);     //true

普通函数在调用时候(注意不是构造函数,前面不加 new),其中的 this 也是指向 window。

但是如果在严格模式下调用的话会报错:

var x = 1;function first(){    console.log(this);     // undefined    console.log(this.x);   // Uncaught TypeError: Cannot read property 'x' of undefined}first();

情况二:构造函数

所谓的构造函数就是由一个函数 new 出来的对象,一般构造函数的函数名首字母大写,例如像 Object,Function,Array 这些都属于构造函数。

function First(){    this.x = 1;    console.log(this);    //First {x:1}}var first = new First();console.log(first.x);      //1

上述代码,如果函数作为构造函数使用,那么其中的 this 就代表它即将 new 出来的对象。

但是如果直接调用 First函数,而不是 new First(),那就变成情况1,这时候 First() 就变成普通函数。

function First(){    this.x =1;    console.log(this);    //Window}var first = First();console.log(first.x);      //undefined

情况三:对象方法

如果函数作为对象的方法时,方法中的 this 指向该对象。

var obj = {    x: 1,    first: function () {        console.log(this);        //Object        console.log(this.x);      //1    }};obj.first();

意:若是在对象方法中定义函数,那么情况就不同了。

var obj = {    x: 1,    first: function () {        function second(){            console.log(this);      //Window            console.log(this.x);    //undefined        }        second();    }}obj.first();

可以这么理解:函数 second虽然是在 obj.first 内部定义的,但它仍然属于一个普通函数,this 仍指向 window。

在这里,如果想要调用上层作用域中的变量 obj.x,可以使用 self 缓存外部 this 变量。

var obj = {    x:1,    first: function () {        var self = this;        function second(){            console.log(self);      //{x: 1}            console.log(self.x);    //1        }        second();    }}obj.first();

如果 first 函数不作为对象方法被调用:

var obj = {    x: 1,    first: function () {        console.log(this);       //Window        console.log(this.x);     //undefined    }};var fn = obj.first;fn();

obj.first 被赋值给一个全局变量,并没有作为 obj 的一个属性被调用,那么此时 this 的值是 window。

情况四:构造函数 prototype 属性

function First(){    this.x = 1;}First.prototype.getX = function () {    console.log(this);        //First {x: 1, getX: function}    console.log(this.x);      //1}var first= new First();first.getX();

在 First.prototype.getX 函数中,this 指向的first 对象。不仅仅如此,即便是在整个原型链中,this 代表的也是当前对象的值。

情况五:函数用 call

var obj = {    x:1}function first(){    console.log(this);     //{x: 1}    console.log(this.x);   //1}first.call(obj);

当一个函数被 call调用时,this 的值就取传入的对象的值。

来源:知乎

链接:https://zhuanlan.zhihu.com/p/25294187?utm_source=com.youdao.note&utm_medium=social

作者:

转载于:https://www.cnblogs.com/powerplay/p/7690112.html

你可能感兴趣的文章
Hadoop history
查看>>
mysql limit offset
查看>>
statpot:使用mongo+bootstrap+highcharts做统计报表
查看>>
文件上传的渐进式增强
查看>>
Linux Shell 脚本限制ssh最大用户登录数
查看>>
incompatible with sql_mode=only_full_group_by
查看>>
C# 判断远程文件是否存在
查看>>
分享一款jQuery全屏滚动页面特性案例
查看>>
深入Jetty源码之HTTP协议
查看>>
java concurrent包自带线程池和队列详细讲解
查看>>
l5如何通过路由走api版本回退查找设置
查看>>
使用VisualStudio2010连接CodePlex进行代码管理
查看>>
NPOI读写Excel
查看>>
rails应用ajax之二:使用rails自身支持
查看>>
设计模式(七)组合模式Composite(结构型)
查看>>
Qt之自定义搜索框
查看>>
程序员的量化交易之路(25)--Cointrader之MarketData市场数据实体(12)
查看>>
使用 CAS 在 Tomcat 中实现单点登录
查看>>
Podfile 常见语法
查看>>
【原】YUI压缩与CSS media queries下的bug
查看>>