JavaScript this指向相关内容
1,默认绑定this指向windw对象
看代码:
function test(C){
var a = 123
function b(){};
}
在预编译环节当中。
OA{
arguments:[1],
this : window,
C : 1,
A : undefined,
b : funtion(){}
}
test(1)
PS: 也就是说,在正常情况下,函数执行,this指向window;
那么有我们想改变this指向,我们该如何做到呢? 看下面
2,隐式改变:谁调用this指向谁;
看代码:
var str = '2222';
var obj = {
str:'1111',
b:function(){
console.log(this.str)
}
}
第一步:
obj.b() 会出现什么? // 11111
实现谁调用指向谁
并且我们的dome的onclick事件都是
升级: var fun = obj.b;//fun 存放了 obj.b整个函数的引用
fun() //2222
为什么?谁调用只想谁!
再看一道题:
var str = '2222';
var obj = {
str:'1111',
b:function(){
console.log(this.str)
}
}
var obj2 = {
str:'33333',
b : function(fn){
fn()
}
}
obj2.b( obj.b)// 出现什么?2222
obj2.b = obj1.b
obj2.b();//3333
讲解:
obj2.b( obj.b) 相当于obj.b作为实参传到函数里,形参接收之后,便有了obj.b的函数体引用,那么再
obj2.b里执行的过程中,fn()并没有对象调用它,只是一个单独函数体执行,内部走预编译的过程中。
从中扩展出 setTimeout(function(){ },1000)或者回掉函数也是这个原理
3,显式绑定:call apply bind
代码如下
var str = 'window';
var obj = {
str :'str',
print:function(){
console.log(this.str);
}
}
let newPrint = obj.print.bind(window);//bind 返回一个新的this指向的函数
// newPrint();
newPrint.call(obj);//bind只能绑定一次 bind过的函数 this无法在改变
// newnewPrint();
讲解,我们想主动改变this的指向,需要的方法call apply bind 。call和apply可以让函数执行,而bind可以返回一个新的函数体。bind改变this最厉害,bind之后的函数,call和apply都无法改变;
但是有一个方法可以改变this ,那就是下面的new操作符,请看下面
4 ,new 操作符
function test(C){
// var this = object.create(test.prototyoe)
// {
// __proto__:test.prototype
//}
var a = 123
function b(){};
}
new test
讲解:当new的过程中,函数内部出现// var this = object.create(test.prototyoe);使this发生改变。
总结: 四种this绑定的权重(看谁最厉害)
//1,默认绑定(空函数执行,函数单纯执行,this指向window) 默认权重
//2,隐式帮定(谁调用this指向谁) 第三权重
//3,显式绑定 (call apply bind) 第二高权重
//4,new 绑定this 权重是最高的
二 升级知识:ES6箭头函数中的this如何邦定?
//学习箭头函数,同学必须知道的几件事。 重要!!!!
//1,箭头函数没有this 没有arguments surper(class);
//2,箭头函数不能new ,不当成构造函数来 没有prototye;
//3,可以表示数据流向 方便JavaScript引擎优化扫码;
看代码:
var reg = 'window';
var obj1 = {
reg:"reg",
print:() => console.log(this.reg)
}
var obj2 = {
reg:"reg",
print:function(){
console.log(this.reg)
}
}
obj1.print() //window
obj2.print() //reg
讲解:箭头函数具有绑定this的能力 ,一旦箭头函数定义,this已经绑定,并且无法修改;
箭头绑定规则:绑定里最近的非箭头函数作用域中的this : 1 找到最近的非箭头的作用域 2 找this
最后再看一个例子:
var obj2 = {
reg:'obj',
getName:function(){
let show = () =>console.log(this.reg)
show();
}
}
obj2.getName() //obj
//scope2(show)----->scope1(getName) 'obj'
讲解:箭头函数show执行,找上一个非箭头函数作用域,发现是getName方法的作用域,然后找this,指向的是obj2,所以最后打印的是 ‘obj’;
转载于:https://www.cnblogs.com/pandawind/p/9791029.html
JavaScript this指向相关内容相关推荐
- App Store审核指南中文版(2014.9.10更新):新增Apple Pay相关内容
苹果在9月3日对App Store审核指南进行了重大更新,新添加了扩展.HealthKit.HomeKit以及TestFlight相关内容.另外,在9月10日新品发布会之后,苹果再次更新了App St ...
- 剔除与深度测试(Culling Depth Testing)相关内容
一.剔除与深度测试(Culling & Depth Testing)相关内容 1.1 剔除(Culling)的概念 对于实时交互的3D环境而言,现实的速度和效率是非常重要的.虽然现在的硬件能力 ...
- OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 清单5.9-5.28
OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 清单5.9-5.28 文章目录 OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 ...
- typescript---配置类相关内容(十五)
配置类相关内容 tsconfig.json文件 使用rollup打包TS文件 安装依赖 步骤 安装依赖 创建package.json文件 创建目录和配置文件 创建ts配置文件 使用webpack打包T ...
- linux/android驱动工程师面试相关内容总结
理论的东西不常用时就会慢慢的被遗忘,但是找工作就是一个如何让别人相信自己的过程,理论知识就是一个非常重要的途径. 一次次机会在错失,每次想找工作时,刷一下简历就去面试了,一次次因为理论被鄙视,也该长长 ...
- 设计模式相关内容介绍
1.设计模式相关内容介绍 1.1. 设计模式概述 创建型模式--------买建筑材料 用于描述------怎样创建对象,它的主要特点是----------将对象的创建与使用分离,这样可以降低系统的耦 ...
- 关于3D空间旋转的相关内容的记录(Euler Angles, Gimbal Lock, Quaternion, iOS CMAttitude)
概述 最近看了些旋转相关内容,记录一下自己的理解和总结.更详尽的内容可以查看参考资料里的文章,讲得很棒. 3D空间旋转的表示方法 可以使用不同的方式表示3D空间里的旋转. Euler Angles(欧 ...
- jQuery实现页内查找相关内容
2019独角兽企业重金招聘Python工程师标准>>> 当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实 ...
- Promise相关内容(三)——异步获取服务器数据:promise方式解决回调地狱的问题。通过多个.then使代码可读性更高 实现异步任务的串行执行,保证按顺序发送请求获取数据
Promise相关内容(三)--异步获取服务器数据:promise方式解决回调地狱的问题.通过多个.then使代码可读性更高 & 实现异步任务的串行执行,保证按顺序发送请求获取数据 第一种形式 ...
最新文章
- 1 字节的 utf-8 序列的字节 1 无效_字节码文件结构详解
- python 利用正则构建一个计算器
- C/C++指针错误与调试相关学习总结
- Linux中date命令用法及大小比较
- 成都亿佰特物联网无线数传专家:lora无线传输模块网关技术的优缺点
- java jta 例子_Java事务处理全解析(八)——分布式事务入门例子(Spring+JTA+Atomikos+Hibernate+JMS)...
- STM32H743+CubeMX-SPI与DRV8889串行通讯,驱动步进电机
- Python《爬虫再练手》
- sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock
- 工业革命 书_工业革命以来最重大的变化
- pandas选取特定段
- 行业大数据产品发展趋势
- Xposed框架安装失败
- 3D机器视觉技术您了解多少?
- ListView刷新指定位置的item
- 计算机和数学 论文参考文献,数学与计算机参考文献外国 数学与计算机核心期刊参考文献哪里找...
- 输入数学函数c语言,C语言基本输入输出及数学函数.ppt
- 云真机可以帮助测试解决什么问题?
- 超实用后台UI模板有这些就够了!(一)
- JS判断对象是否为空(个人常用)
热门文章
- python的一些常用操作
- Linux下Nginx+PHP+MySQL配置(图)
- CCNP学习笔记(5)
- python下selenium模拟浏览器常见操作
- Linux基于expect(tcl)实现shell自动交互
- 【正一专栏】欧冠决赛点评——只服齐达内,送别布冯
- 机器学习知识点(四)最小二乘法Java实现
- Java-POI操作excel清除单元格分行字符
- 线程本地存储器——Windows核心编程学习手札之二十一
- Leetcode 105. 从前序与中序遍历序列构造二叉树 解题思路及C++实现