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 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
javascript事件模型实例分析
Jan 30 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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的memcached客户端memcached
2011/06/14 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
解析Python中的异常处理
2015/04/28 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
使用python生成目录树
2018/03/29 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python代码编写计算器小程序
2020/03/30 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
高中自我评价范文
2014/01/27 职场文书
调解协议书
2014/04/16 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS