原生javascript中this几种常见用法总结


Posted in Javascript onFebruary 24, 2020

本文实例讲述了原生javascript中this几种常见用法。分享给大家供大家参考,具体如下:

this的应用  “是”  代名词

this必须出现在函数里面

//------------------默认绑定
function test (){
  console.log(this.a);//1
}
var a = 1;
test();

this取得是window的对象a;此处默认window

//---------------------隐士绑定?
function test (){
  console.log(this.a);//2
}
var foo = {
  a:2,
  f:test
}
var a = 1;
foo.f();

此处this取得是foo对象的a;

//---------------------隐士绑定 多层调用链?
function test (){
  console.log(this.a);//3
}
var foo = {
  a:3,
  f:test
}
var foo2 = {
  a:4,
  f:foo
}
var a = 1;
foo2.f.f();

此处this取得是foo对象的a,foo2中只起到调用foo,所以thisl指的还是foo;

//---------------------隐士绑定 (隐士丢失) 多层调用链?
function test (){
  console.log(this.a);//1
}
var foo = {
  a:2,
  f:test
}
var a = 1;
var fun = foo.f;
fun();

由于是赋值  调用的是fun(),foo.f 是取函数,但是this的对象是fun,是window对象,所以只能取得全局变量a

//1,this所在的函数是事件处理函数,那么this就是事件源;
var btns = document.getElementsByTagName("button");
获取所有button
for(var i = 0; i < btns.length;i++){
  btns[i].onclick = function(){
    this代表当前事件源
    console.log(this)
  }
}
// 2、this所在函数是构造函数,那么this就是new的对象,并且会生成__proto__属性。
function func(name,age){
  this.name = name;
  this.age = age;
  // console.log(this)
}
let f = new func("z",20);
// 3、this所在函数是类的方法,那么this就是调用方法时的对象
function Fnc(name,age){
  this.name = name;
  this.age = age;
}
Fnc.prototype.eat = function(){
  console.log(this);
}
let fn = new Fnc("a",12);
fn.eat();
let fn2 = new Fnc("b",10);
fn2.eat();
// 4、this的转移 转移到window
var btns = document.getElementsByTagName("button");
//获取所有button
for(let i = 0; i < btns.length;i++){
  btns[i].onclick = function(){
    console.log(this)
    // this代表点击事件源
    setTimeout(function(){
      console.log(this);
      // this代表window对象 发生了转移
    },30)
  }
}
/*
以上所说的所在函数,重点看关键字function。不会受箭头函数的影响
JavaScript中的一切的一切都属于window对象。window对象可以省略。
所有的全部变量,函数,类,都属于window对象。
this的转移:发生在闭包里。*/

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

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

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
详细分析React 表单与事件
Jul 08 Javascript
js实现坦克大战游戏
Feb 24 #Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 #Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 #Javascript
浅谈TypeScript的类型保护机制
Feb 23 #Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 #Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 #Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python 对象中的数据类型
2017/05/13 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python加速程序运行的方法
2020/07/29 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
班级德育工作实施方案
2014/02/21 职场文书
教师党员个人整改措施
2014/10/27 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
电频谱管理的原则是什么
2022/02/18 无线电