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’;

JavaScript this指向相关内容的更多相关文章

  1. 移动端 h5 开发相关内容总结——JavaScript 篇

    1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...

  2. 在地图中调用显示FeatureLayer并进行render、popupTemplate、添加图例等相关内容的设置

    ArcGIS Server发布完FeatureLayer后,就可以在自己的代码中调用并在地图上显示出来了. 一.代码框架 调用FeatureLayer,要在require开头引入"esri/ ...

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

    当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...

  4. 学习笔记之html5相关内容

    写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的 ...

  5. 第一天上午——HTML网页基础知识以及相关内容

    今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...

  6. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

  7. Web 前端性能优化相关内容解析[转]

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

  8. JS动态增加删除UL节点LI及相关内容示例

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

  9. ”危险“的RESTRICT与GCC的编译优化(编程者对编译器所做的一个“承诺”:使用restrict修饰过的指针,它所指向的内容只能经由该指针修改)

    restrict是C99标准中新添加的关键字,对于从C89标准开始起步学习C语言的同学来说(包括我),第一次看到restrict还是相当陌生的.Wikipedia给出的解释如下: In the C p ...

随机推荐

  1. 使用私有git仓库备份服务器脚本和配置文件

    1. 创建私有git仓库 服务器端配置: # 安装 git yum -y install git # 创建 git 用户 useradd git # 创建私有仓库数据存储目录 mkdir /git_b ...

  2. Hibernate框架基础

    Hibernate框架基础 Hibernate框架 ORM概念 O, Object 对象 R, Realtion 关系 (关系型数据库: MySQL, Oracle…) M,Mapping 映射 OR ...

  3. BZOJ2748 音量调节

    音量调节   Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开 ...

  4. 利用java实现一个简单的链表结构

    *博客搬家:初版发布于 2014/07/04 定义: 所谓链表就是指在某节点存储数据的过程中还要有一个属性用来指向下一个链表节点,这样的数据存储方式叫做链表 链表优缺点: 优点:易于存储和删除 缺点: ...

  5. 【实战】sqlmap显示有注入却无法爆出库名

    sqlmap爆mssql数据库时采用的语句如下图: 从语句中不难看出,如果关键字select被“(非tamper绕过)处理”了,那sqlmap是无法爆出数据库的,这时我们可以使用原始的猜解法, #判断 ...

  6. archlinux安装串口终端ckermit

    1. 将usb转串口连接到PC上.通过dmesg命令可以查看USB转串口是否被PC识别.   显示 ……attachec to ttyUSB0即被识别.   linux系统一般有USB转串口驱动(PL ...

  7. Laravel 控制器 Controller 传值到 视图 View 的几种方法总结

    单个值的传递   with public function index() { $test = "测试"; return view('test.index')->with(' ...

  8. 网络编程- 解决黏包现象方案二之struct模块(七)

    上面利用struct模块与方案一比较,减少一次发送和接收请求,因为方案一无法知道client端发送内容的长度到底有多长需要和接收OK.多一次请求防止黏包,减少网络延迟

  9. J15W-J45W铜制截止阀厂家,J15W-J45W铜制截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W铜制截止阀 无极资讯网精心为您挑选了(J15W-J45W铜制截止阀)信息,其中包含了(J15W-J45W铜制截止阀)厂家,( ...

  10. pandas中数据框的一些常见用法

    1.创建数据框或读取外部csv文件 创建数据框数据 """ 设计数据 """ import pandas as pd data = {&qu ...