this

1.非箭头函数:

  • 如果是该函数是一个构造函数,this指针指向一个新的对象

  • 在严格模式下的函数调用下,this指向undefined

  • 如果是该函数是一个对象的方法,则它的this指针指向这个对象

2.箭头函数:

  • 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

总结:普通函数的this指向看调用,箭头函数的this指向看声明,指向声明时候的函数作用域;

setTimeout会延迟函数的声明

bind、call、apply

  1. bind
  • 绑定this不执行(执行时绑定this一次,可新生成函数储存持久型this绑定)
  1. call
  • 绑定this执行n参数任意类型(执行时绑定this一次)
  1. apply
  • 绑定this执行第二个参数必须数组分解依次执行(执行时绑定this一次)

apply实践

var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);//数组内传入前面函数的参数
"John Doe,Oslo,Norway"

this和call结合运用


let a,
barObj = { msg: "bar的this指向" };
fooObj = { msg: "foo的this指向" };
function foo() {
a(); // 结果:{ msg: 'bar的this指向' }
}
function bar() {//箭头函数this绑定在这层(bar)
a = () => {
console.log(this); //箭头函数作用域局限于bar
}; // 在bar输出当前this信息
}
bar.call(barObj); // 改变bar指向barobj执行后 a:输出this的函数
a(); //(当前a输出bar)
foo.call(fooObj); // 将foo的this指向fooObj
/// a为箭头函数输出{msg: "bar的this指向"}
/// a为不箭头函数输出最外层(windows或者其他)

箭头函数和普通函数差异

普通函数的this指哪打哪,箭头函数较特殊在创建的时候就已定死(除非后续再赋值可以改变),图中

function bar() {//箭头函数this绑定在这层(bar)
a = () => {
console.log(this); //箭头函数作用域局限于bar
}; // 在bar输出当前this信息
}
bar.call(barObj)

箭头函数是赋值给了a,由bar调用(谁调用bar就指定死了this,箭头函数this绑定在这个“谁”上),所以这里是bar.call(barObj),绑定在barObj

箭头函数的this没有绑定b对象成功,貌似永远绑定了barObj(这是箭头函数第一次绑定的地方,后续也没由修改,要修改只能重新赋值a=()=>{console.log(this)}类似这样)

其实自己刚入门的时候就已熟读this指向问题了,但是在综合运用场景或者复杂运用场景才正宗明白如何使用this,所谓实践出真知,工作中一班也不会频繁更改this指向,一般也就一次(初始化的时候),所以很少实践这种场景,coding后对自己提升蛮大的

js的this、bind、call、apply个人领悟的更多相关文章

  1. js中的bind、apply、call、callee、caller的区别

    1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...

  2. js call与bind和apply的区别

    介绍 在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是thi ...

  3. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  4. js修改函数内部的this指向(bind,call,apply)

    js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...

  5. JS中的call()和apply()方法和bind()

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  6. js 改变this指向的三种方法 bind call apply

    先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...

  7. Bind、Apply、Call三者的区别

    1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...

  8. 自己动手用原生实现 bind/call/apply

    大家好!!!注册一年多的第一篇博客. 自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们... 接下来的一段时间, 我都会不定期整理自己理解的js知识点, ...

  9. js原生函数bind

    /*在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了.下面的一个例子能很好的说明这 ...

  10. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

随机推荐

  1. Vue 踩坑日志 - 有关路由传参的坑

    1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...

  2. shell变量的声明和使用

  3. vue,一路走来(12)--父与子之间传参

    今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...

  4. 6层PCB设计技巧和步骤

    6层PCB设计技巧和步骤 一.原理图的编辑  6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...

  5. Sass-@for

    在制作网格系统的时候,大家应该对 .col1~.col12 这样的印象较深.在 CSS 中你需要一个一个去书写,但在 Sass 中,可以使用 @for 循环来完成.在 Sass 的 @for 循环中有 ...

  6. wxpython 文本框TextCtrl

    path_text = wx.TextCtrl(frame, pos=(5, 5), size=(350, 24))最常用的两个函数:path = path_text.GetValue() conte ...

  7. sql2008质疑处理方法

    日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoint_Config)进行些不正常操作如数据库在读写时而无故停止数据库,从 ...

  8. sql server 2000安装程序配置服务器失败

    第一种方法 今天安装SQL Server 2000遇到了个很BT的问题,提示出下: 安装程序配置服务器失败.参考服务器错误日志和C:\Windows\sqlstp.log了解更多信息. 以前进安装目录 ...

  9. [CSP-S模拟测试]:tree(DP)

    题目传送门(内部题57) 输入格式 第一行包含一个数:$n$表示树的节点数.接下来$n-1$行,每行包含两个数:$u,v$表示无根树的一条边. 输出格式 输出$n$行,第$i$行包含一个浮点数,保留三 ...

  10. winform防止输入法对扫码的干扰

    把textbox的imemode的属性设为disable,就强制只能录入英文和半角符号,防止了中文输入法等的干扰. 参考:https://blog.csdn.net/jhycjhyc/article/ ...