JavaScript中的this基本问题实例小结


Posted in Javascript onMarch 09, 2020

本文实例讲述了JavaScript中的this基本问题.分享给大家供大家参考,具体如下:

在函数中 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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
有关Promises异步问题详解
Nov 13 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python图像和办公文档处理总结
2019/05/28 Python
python实现随机加减法生成器
2020/02/24 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
管道维修工岗位职责
2013/12/27 职场文书
运动会稿件50字
2014/02/17 职场文书
学校创先争优活动总结
2014/08/28 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL