JS学习(this关键字)
this关键字
this关键字是什么
this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。但是即使是非常有经验的JavaScript开发者也很难说清它到底指向什么。
1.this被定义在所有函数的作用域中
2.this指向哪个对象不取决于this被定义在哪里,而是取决于调用的位置
//定义一个全局变量
var v = 10;
//this经常被定义在函数的作用域中
function fn(){//this 总是要返回一个对象console .log(this . v);
}
fn();
绑定规则
默认绑定
在一个函数体中使用this,当该函数被独立调用。可以把这条规则看作是无法应用其他规则时的默认规则。
function foo(){console .log(this .a);
}
var a=2;
foo();//2
隐式绑定
隐式绑定的规则需要考虑的是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。
function foo(){console .log(this.a);
}
var obj = {a:2,foo:foo
};
obj.foo();//2
隐式绑定丢失
隐式绑定丢失是最常见的this绑定问题,指的就是被隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this绑定到全局对象。
// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){console.log(this.v);
}
// 定义一个对象
var obj = {v : 200,f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun();
显示绑定
显示绑定就是明确在调用时,this所绑定的对象。JavaScript中提供了apply()方法和call()方法实现,这两个方法的第一个参数接收是一个对象,会把这个对象绑定到this,接着在调用函数时指定这个this
// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){console.log(this.v);
}
// 定义一个对象
var obj = {v : 200,f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun.apply(obj);
new绑定
1.创建(或者说构造)一个全新的对象
2.这个新对象会绑定到函数调用的this
3.如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
function Hero(name){this.name = name;
}
// this取决于函数调用的位置
var hero1 = new Hero('hhh');var hero2 = new Hero('xxx');
JS学习(this关键字)相关推荐
- html 流程控制,HTML5独家分享:原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
- React(Js)学习
React(Js)学习 网络请求的封装 //泛型T根据json格式规定相应的返回数据类型 async function request<T>(method: string, url: st ...
- Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目 生成的 ...
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- javascript从入门到跑路-----小文的js学习笔记(25)------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
- javascript从入门到跑路-----小文的js学习笔记目录
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- 程序员的高速学习法——以JS学习为例,进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
最新文章
- 7本书带你掌握数据科学中的数学基础(附下载)
- 艾特某人代码实现_为何敲代码,学好数学很重要?
- 数据库工作笔记005---You have an error in your SQL syntax; check the manual that corresponds to y
- 第25月第3天 Mxshop项目记录01
- Paint方法总结(三):图层混合模式
- hdu 变形课 1181 这道题数据真实若爆了
- Unix操作系统内核结构报告
- centos 7的systemctl
- 信息论与编码_4G与5G分别采用什么信道编码技术_卷积码_Turbo码_LDPC码_Polar码
- java中使用MD5验证文件的完整性
- html鼠标经过状态,30种炫酷html5鼠标滑过图片标题显示效果
- Python大法之告别脚本小子系列—信息资产收集类脚本编写(下)
- Centos 7分区合并
- /deep/ >>> ::v-deep的用法
- 【记忆化搜索】UVA 10118 free candy
- 51nod1327 棋盘游戏 [dp]
- [Brute force][规律] Jzoj P3084 超级变变变
- 市场管理流程介绍(MM流程)
- 用 Django 开发微信小程序后端实现用户登录
- HTML基础--CSS3(二)