JavaScript this在函数中的指向及实例详解


Posted in Javascript onOctober 14, 2019

一、this,其实可以类比成人

说到this的话,我们在js中主要研究的都是函数中的this,在javascript中,this代表当前行为的执行主体,而context代表的是当前行为执行的的环境(区域)。

例如男神在北理珠吃饭,这句话分别代表的含义如下

男神 -->> 主体(this)

吃饭 -->> 函数(function)

北理珠 -->> 环境(context)

-->>说明:吃饭是函数,男神是函数的主体,北理珠就是当前行为的执行环境(context),主体跟上下文没有必然的联系,主体只与函数有关系;就好像男神吃饭,其实哪里都可以吃饭,吃饭这个动作的主体永远都是男神,环境是可以变化的。

-->>结论:上面,其实也可以说明,this指的是谁,和函数在哪里定义和执行是没有任何关系的。

二、在函数中,如何区分this

1、函数执行,首先看函数名前面是否有“.” ,有的话, “.”前面是谁,this就是谁;没有的话this就是window

//例子一
console.log(this);
function eat() {
  console.log(this); //this->window
}
~function() {
  eat(); //this->window
}();
 
//例子二
function fn() {
  console.log(this); 
}
var obj = {fn: fn};
fn(); //this->window
obj.fn() //this->obj
 
//例子三
function sum() {
  fn(); 
}
sum(); //this->window
 
//例子四
var oo = {
  sum: function() {
    console.log(this);
    fn();
  }
}
oo.sum(); //首先sum函数里面,第一个输出this为oo;之后执行fn(),this为window

2、立即执行函数中的this永远都是window

(function() {
  console.log(this); // this->window
})()

3、给元素的某一事件绑定方法,当事件触发的时候,执行对应的方法,方法中的this是当前元素

function fn() {
  console.log(this);
}
//例子一
document.getElementById("div1").onclick = fn; //this -> dom元素
//例子二
document.getElementById("div1").onclick = function() {
  console.log(this); // this->#div
  fn(); // this->window
}

结论: 找到函数在哪里执行的,有点,this就是点前面东西;没点,this就是window

三、使用this分析一道面试题

var num = 20;
var obj = {
  num: 30,
  fn: (function(num) {
    this.num *= 3;
    num += 15;
    var num = 45;
    return function() {
      this.num *= 4;
      num + =20;
      console.log(num);
    }
  })(num)
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120

上面代码使用堆栈图来描述,如下,首先正方形代表栈内存(函数执行环境,context),圆边方形代表堆内存(用来存放字符串)。

JavaScript this在函数中的指向及实例详解

第一步,形成一个js执行环境,window作用域,首先预解释(声明var,声明+定义function);

第二步,代码由上往下执行,num = 20, obj = 引用数据类型(数据存在堆内存里面)

第三步,因为obj.fn是立即执行函数,所以形成一个私有作用域A,执行fn里面的函数,因为fn里面的函数返回值为function,return值被外面的obj.fn引用了,这个立即执行函数A作用域不销毁。

第四步,window作用域下面的代码继续往下执行。

四、this实践运用

现在有这样一个需求,要求做一个累加器,每点击一次,就累加1。

var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
// 方法一
// 利用全局作用域不销毁的原理,把需要累加的数字定义为全局变量
var count = 0;
oBtn.onclikc = function() {
  count++;
  spanNuM.innerText = count; 
}
// 弊端:在项目中为了防止全局变量之间的冲突,我们一般是禁止或者减少使用全局变量的
 
// 方法二
// 形成一个不销毁的私有作用域保存我们需要累积的数据
// 1)
(function() {
  var count = 0;
  oBtn.onclick = function() {
    ++count;
    spanNum.innerText = count;
  }
})
// 2)
oBtn.onclick = (function() {
  var count = 0;
  return function() {
    ++count;
    spanNum.innerText = count;
  }
})
// 上面的两种写法都是表达同一个意思
// 弊端:有一个不销毁的私有作用域,占那么一点点内存
 
// 方法三
// 利用innerHTML的方式处理,每点击一次都需要到页面获取最新的值,然后累加,最后把结果放进去
oBtn.onclick = function() {
  ++spanNum.innerHTML; 
}
// 弊端:innerHTML获取的时候本来就需要浏览器去处理,每一次都需要把页面的内存先转化为字符串,然后累加,累加完重新添加回去,当重新添加的时候浏览器需要重现渲染一遍页面。
 
// 方法四
// 利用自定义属性存储(推荐!)
oBtn.count = 0;
oBtn.onclick = function() {
  spanNum.innerTxt = ++this.count;  
}
//注意,这里的count只是对象的一个属性,它既不是全局变量,也不是局部变量哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
vue循环数组改变点击文字的颜色
Oct 14 #Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 #Javascript
VUE+node(express)实现前后端分离
Oct 13 #Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 #Javascript
javaScript把其它类型转换为Number类型
Oct 13 #Javascript
js 实现watch监听数据变化的代码
Oct 13 #Javascript
15 分钟掌握vue-next响应式原理
Oct 13 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
CI框架附属类用法分析
2018/12/26 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript Object.extend
2010/05/18 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python中的元类编程入门指引
2015/04/15 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python requests库的使用
2021/01/06 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
运动会入场词100字
2014/02/06 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
白莲教口号
2014/06/18 职场文书
公司活动总结范文
2014/07/01 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python