深入理解javascript中的 “this”


Posted in Javascript onJanuary 17, 2017

一、前言:

我们知道 “this” 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它。

但是,有一部分开发朋友,对 “this” 一知半解,下面我们就一起来探讨学习下javascript中 “this” 的具体含义吧!

二、This总结:

This指针作用域:

1)、在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象。

2)、当在函数执行环境中使用this时,情况就有些复杂了。如果函数没有明显的作为非window对象的属性,而只是定义了函数,不管这个函数是不是定义在另一个函数中,这个函数中的this仍然表示window对象。如果函数显示地作为一个非window对象的属性,那么函数中的this就代表这个对象。

3)、当通过new运算符来调用函数时,函数被当做一个构造函数,this指向构造函数创建出来的对象。

三、各种情形下的DEMO:(当然,你也可以按照自己的想法来做各种测试...)

#在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象

console.log(this); //Window
console.log(typeof this); //object
console.log(this === window); //true

##在函数执行环境中使用this时,如果函数没有明显的作为非window对象的属性,而只是定义了函数,不管这个函数是不是定义在另一个函数中,这个函数中的this仍然表示window对象

function A(){
 //在A函数中定义一个B函数
 function B(){
  console.log(this); //Window
  console.log(typeof this); //object
  console.log(this === window); //true
 }
 //在A函数内部调用B函数
 B();
}
//调用A函数
A();

###在函数执行环境中使用this时,如果函数显式地作为一个非window对象的属性,那么函数中的this就代表这个对象

//定义一个对象obj,并为她添加属性name,添加方法objFun
var obj = {
 name: '敲代码的怪蜀黍',
 objFun: function(){
  console.log(this); // Object {name: "敲代码的怪蜀黍"}
  console.log(typeof this); //object
  console.log(this === window); //false
  console.log(this.name); //敲代码的怪蜀黍
 }
}; 
//调用obj对象的方法
obj.objFun(); //this 绑定到当前对象,也就是obj对象

把上面的代码稍微改一下:

//定义一个对象obj,并为她添加属性name,添加方法objFun
var obj = {
 name: '敲代码的怪蜀黍',
 objFun: function(){
  console.log(this); //window
  console.log(typeof this); //object
  console.log(this === window); //true
  console.log('为了看效果而.'+this.name+'.已'); //为了看效果而..已
 }
};
var test = obj.objFun;
test();

这时候,你会神奇的发现,上面例子中的 this 又等于 window 了,到底是什么原因导致的呢?下面我们来分析分析:

我们首先要知道 “函数内部this的值不是静态的”,每次你调用一个函数它总是重新求值(但这一过程发生在函数代码实际执行之前),函数内部的this值实际上是由函数被调用的父作用域提供,更重要的是,她依赖实际函数的语法。

当函数被调用时,我们看紧邻括号“()”的左边。如果在括号的左侧存在一个引用,传递给调用函数的“this”值是引用所属于的那个对象,否则this的值就是全局对象。

我们再接着看看上面的例子,“var test = obj.objFun;” 这里表示没有调用函数,不用管。“test();”这里调用了函数,我们发现在括号“()”的左侧是一个变量test,test不是一个对象的引用,所以this的值就是全局对象。接下来,为了更深刻的理解上面的原理,我们来个更为复杂点的例子:

var name = 'window在手,天下我有!';
var obj = {
 name: '敲代码的怪蜀黍',
 objBar: {
  name: 'BOBO',
  barFun: function(){
   console.log(this.name);
  }
 }
};
//()左侧是barFun引用,它指向objBar对象,所以打印出 “BOBO”
var test1 = obj.objBar.barFun(); //BOBO
//()左侧是test2,test2它并不是某个对象的引用,所以打印出 “window在手,天下我有!”
var test2 = obj.objBar.barFun;
test2(); //window在手,天下我有!
//下面这个看起来复杂,其实抓住一点就行了:()左侧是testBar,testBar并不属于某个对象的引用,当然打印出来的还是 “window在手,天下我有!”
var test3 = obj.objBar;
var testBar = test3.barFun;
testBar(); //window在手,天下我有!

####当通过new运算符来调用函数时,函数被当做一个构造函数,this指向构造函数创建出来的对象

var name = 'window在手,天下我有!';
function A(){
 console.log(this.name);
}
A(); //window在手,天下我有! 
var objA = new A(); //undefined (因为objA并没有name属性)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 #Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 #Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 #Javascript
js生成随机数方法和实例
Jan 17 #Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 #Javascript
js实现手机拍照上传功能
Jan 17 #Javascript
You might like
php获取当月最后一天函数分享
2015/02/02 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
如何使用python爬取csdn博客访问量
2016/02/14 Python
python 计算文件的md5值实例
2017/01/13 Python
Python探索之ModelForm代码详解
2017/10/26 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python处理RSTP视频流过程解析
2020/01/11 Python
基于Python的OCR实现示例
2020/04/03 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
八荣八耻的活动方案
2014/08/16 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
学校德育工作总结2015
2015/05/11 职场文书