原生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扩展的JavaScript常用函数库
Nov 30 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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
杏林同学录(六)
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
了解重排与重绘
2019/05/29 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
企业管理毕业生求职信范文
2014/03/07 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
文书工作总结(范文)
2019/07/11 职场文书