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指向相关内容相关推荐

  1. App Store审核指南中文版(2014.9.10更新):新增Apple Pay相关内容

    苹果在9月3日对App Store审核指南进行了重大更新,新添加了扩展.HealthKit.HomeKit以及TestFlight相关内容.另外,在9月10日新品发布会之后,苹果再次更新了App St ...

  2. 剔除与深度测试(Culling Depth Testing)相关内容

    一.剔除与深度测试(Culling & Depth Testing)相关内容 1.1 剔除(Culling)的概念 对于实时交互的3D环境而言,现实的速度和效率是非常重要的.虽然现在的硬件能力 ...

  3. OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 清单5.9-5.28

    OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 清单5.9-5.28 文章目录 OpenGL超级宝典(第7版)笔记20 统一变量 一致区块 uniform相关内容 ...

  4. typescript---配置类相关内容(十五)

    配置类相关内容 tsconfig.json文件 使用rollup打包TS文件 安装依赖 步骤 安装依赖 创建package.json文件 创建目录和配置文件 创建ts配置文件 使用webpack打包T ...

  5. linux/android驱动工程师面试相关内容总结

    理论的东西不常用时就会慢慢的被遗忘,但是找工作就是一个如何让别人相信自己的过程,理论知识就是一个非常重要的途径. 一次次机会在错失,每次想找工作时,刷一下简历就去面试了,一次次因为理论被鄙视,也该长长 ...

  6. 设计模式相关内容介绍

    1.设计模式相关内容介绍 1.1. 设计模式概述 创建型模式--------买建筑材料 用于描述------怎样创建对象,它的主要特点是----------将对象的创建与使用分离,这样可以降低系统的耦 ...

  7. 关于3D空间旋转的相关内容的记录(Euler Angles, Gimbal Lock, Quaternion, iOS CMAttitude)

    概述 最近看了些旋转相关内容,记录一下自己的理解和总结.更详尽的内容可以查看参考资料里的文章,讲得很棒. 3D空间旋转的表示方法 可以使用不同的方式表示3D空间里的旋转. Euler Angles(欧 ...

  8. jQuery实现页内查找相关内容

    2019独角兽企业重金招聘Python工程师标准>>> 当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实 ...

  9. Promise相关内容(三)——异步获取服务器数据:promise方式解决回调地狱的问题。通过多个.then使代码可读性更高 实现异步任务的串行执行,保证按顺序发送请求获取数据

    Promise相关内容(三)--异步获取服务器数据:promise方式解决回调地狱的问题.通过多个.then使代码可读性更高 & 实现异步任务的串行执行,保证按顺序发送请求获取数据 第一种形式 ...

最新文章

  1. 1 字节的 utf-8 序列的字节 1 无效_字节码文件结构详解
  2. python 利用正则构建一个计算器
  3. C/C++指针错误与调试相关学习总结
  4. Linux中date命令用法及大小比较
  5. 成都亿佰特物联网无线数传专家:lora无线传输模块网关技术的优缺点
  6. java jta 例子_Java事务处理全解析(八)——分布式事务入门例子(Spring+JTA+Atomikos+Hibernate+JMS)...
  7. STM32H743+CubeMX-SPI与DRV8889串行通讯,驱动步进电机
  8. Python《爬虫再练手》
  9. sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock
  10. 工业革命 书_工业革命以来最重大的变化
  11. pandas选取特定段
  12. 行业大数据产品发展趋势
  13. Xposed框架安装失败
  14. 3D机器视觉技术您了解多少?
  15. ListView刷新指定位置的item
  16. 计算机和数学 论文参考文献,数学与计算机参考文献外国 数学与计算机核心期刊参考文献哪里找...
  17. 输入数学函数c语言,C语言基本输入输出及数学函数.ppt
  18. 云真机可以帮助测试解决什么问题?
  19. 超实用后台UI模板有这些就够了!(一)
  20. JS判断对象是否为空(个人常用)

热门文章

  1. python的一些常用操作
  2. Linux下Nginx+PHP+MySQL配置(图)
  3. CCNP学习笔记(5)
  4. python下selenium模拟浏览器常见操作
  5. Linux基于expect(tcl)实现shell自动交互
  6. 【正一专栏】欧冠决赛点评——只服齐达内,送别布冯
  7. 机器学习知识点(四)最小二乘法Java实现
  8. Java-POI操作excel清除单元格分行字符
  9. 线程本地存储器——Windows核心编程学习手札之二十一
  10. Leetcode 105. 从前序与中序遍历序列构造二叉树 解题思路及C++实现