一、this的默认绑定

当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象

例子1:

function foo(){
console.log(this===window)
}
foo();//true

重点:迷惑性的例子

function fn(){
function fn1(){
console.log(this===window);
}
fn1();
}
fn();//true

函数fn1在一个外部函数fn里面声明并且调用了,他的this依然指向window,因为【没有明确的调用对象时,讲对函数的this使用默认绑定:绑定到全局的window对象】

加强版迷惑例子:

var obj = {
fn:function(){
function innerfn(){
console.log(this===window);
}
innerfn();//独立调用
}
}
obj.fn();//true

 这里例子中,obj.fn()调用实际上是用了this的隐式绑定

【总结】凡是函数作为独立函数调用,无论它的位置在哪,它行为表现都和直接在全局环境中调用无异

二、this的隐式绑定

当函数被一个对象所“包含”的时候,我们称函数的this被隐式绑定到这个对象里面,这时候,通过this可以直接访问所绑定的对象里面的其他属性

例子:

var obj = {
a:1,
fn:function(){
console.log(this);//obj({a: 1, fn: ƒ})
function fn1(){
console.log(this);//Window 
}
fn1();
}
}
obj.fn();

结果

对比一下这两个代码

//第一段代码
function fn(){
console.log(this.a)
}
var obj = {
a:1,
fn:fn
}
obj.fn();//1 //第二段代码
var obj = {
a:1,
fn:function(){
console.log(this.a);
console.log(this);
}
}
obj.fn();//1

fn()函数不回因为定义的位置在obj对象的内部和外部有任何区别,谁调用他谁就是this,所以在这个场景下fn()函数的this就是对象obj

三、this的显式绑定【call()、bind()、apply()】

直接例子

var name='小红',age=18;
var obj = {
name:'小黄',
objAge:this.age,
myFn:function(){
console.log(this.name + '年龄' + this.age);
}
}
var db = {
name:'小蓝',
age:24
}
obj.myFn.call(db);
obj.myFn.apply(db);
obj.myFn.bind(db)();

 结果

 

结论:bind 返回的是一个新的函数,你必须调用它才会被执行

多个传参情况下

var name='小红',age=18;
var obj = {
name:'小黄',
objAge:this.age,
myFn:function(fm,t){
console.log(this.name + '年龄' + this.age , '来自' + fm + '去往' + t);
}
}
var db = {
name:'小蓝',
age:24
}
obj.myFn.call(db,'广州','上海');
obj.myFn.apply(db,['广州','上海']);
obj.myFn.bind(db,'广州','上海')();
obj.myFn.bind(db,['广州','上海'])();

 结果

总结

  call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:
  call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面  obj.myFun.call(db,'成都', ... ,'string' );
  apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(db,['成都', ..., 'string' ]);
  bind除了返回是函数以外,它 的参数和call 一样。
 

四、new绑定

执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象

五、箭头函数的this

箭头函数是没有this的,箭头函数中的this只取决于包裹箭头函数的第一个普通函数的this。

PS:以上是参考了其他博主的自己做的笔记而已

this的绑定(四种绑定)+ 箭头函数 的this的更多相关文章

  1. this的四种绑定规则总结

    一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...

  2. jQuery 事件绑定四种方式,delegate委托强大绑定在3.0中修改为on

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【javascript】函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  4. 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~

       javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this   一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...

  5. 函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  6. JavaScript函数中的this四种绑定形式

    this的默认绑定.隐式绑定.显示绑定.new绑定 <script> //全局变量obj_value ; //1.window调用 console.log(`*************** ...

  7. this的四种绑定形式

    一 , this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象. 一个例子 function fire ...

  8. this四种绑定方式之间的奇淫技巧

    写在前面 上一篇中,我们对于JavaScript中原始值.复杂值以及内存空间进行了一个深入浅出的总结,这次我们来聊一聊JavaScript中this关键字的深入浅出的用法. 在 JavaScript ...

  9. ASP.NET MVC之下拉框绑定四种方式(十)

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

随机推荐

  1. opencv 2 Opencv数据结构与基本绘图

    基础图像容器Mat Mat 是一个类,又两个数据部分组成:矩阵头(包含矩阵尺寸,存储方法,存储地址等信息)和一个指向存储所有像素值的矩阵(根据所选存储方法不同,矩阵可以是不同的维数)的指针.矩阵头的尺 ...

  2. C# UTM坐标和WGS84坐标转换小工具

    工具根据:http://home.hiwaay.net/~taylorc/toolbox/geography/geoutm.html js代码改编 工具源码github:https://github. ...

  3. [FPGA]Verilog实现寄存器LS374

    目录 想说的话... 正文 IC介绍 电路连接图 功能表 逻辑图 实验原理 单元实现_D触发器 整体实现(完整代码) 想说的话... 不久前正式开通了博客,以后有空了会尽量把自己学习过程中的心得或者感 ...

  4. 详解在Linux系统中安装JDK

    本文以在CentOS 7.6中安装JDK8为例进行安装,其他系统和版本都是大同小异的. 下载 进入Oracle官方网站的下载页面. 首先,接受许可协议,如下图: 然后,根据Linux系统的位数选择要下 ...

  5. 2019-11-28:ssrf基础学习,笔记

    ssrf服务端请求伪造ssrf是一种由恶意访问者构造形成由服务端发起请求的一个安全漏洞,一般情况下,ssrf访问的目标是从外网无法访问的内部系统,正式因为它是由服务端发起的,所以它能请求到它相连而外网 ...

  6. docker快速部署DNS,实现快速上线

    概念Docker 是一个开源的应用容器引擎,Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.这里我将使用do ...

  7. MySQL分层和查询数据的流程

    MySQL分层 MySQL分层 主要分为:连接层,服务层,引擎层,存储层 客户端执行一条select命令的流程如下 连接器 功能: 负责跟客户端建立连接.获取权限.维持和管理连接 细节: 1.当用户登 ...

  8. 阿里云安装mysql

    1. ##数据库字符集SHOW VARIABLES LIKE 'character_set_%'; ##数据库校对股则SHOW VARIABLES LIKE 'collation_%'; 2.创建数据 ...

  9. react-native技术调研:react-native是什么?

    如有疏漏错误,还望指正.转载不忘加上>>原链接<<哦~ react-native是什么? react-native原理 从字面意思上来看,react-native由单词reac ...

  10. 【HUAWEI Mate30】抽奖啦!华为IoT新福利上线!

    华为云OceanConnect IoT云服务包括应用管理.设备管理.系统管理等能力,实现统一安全的网络接入.各种终端的灵活适配.海量数据的采集分析,从而实现新价值的创造. 华为云OceanConnec ...