js的this、bind、call、apply个人领悟
this
1.非箭头函数:
如果是该函数是一个构造函数,this指针指向一个新的对象
在严格模式下的函数调用下,this指向undefined
如果是该函数是一个对象的方法,则它的this指针指向这个对象
2.箭头函数:
- 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
总结:普通函数的this指向看调用,箭头函数的this指向看声明,指向声明时候的函数作用域;
setTimeout会延迟函数的声明
bind、call、apply
- bind
- 绑定this不执行(执行时绑定this一次,可新生成函数储存持久型this绑定)
- call
- 绑定this执行n参数任意类型(执行时绑定this一次)
- 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个人领悟的更多相关文章
- js中的bind、apply、call、callee、caller的区别
1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...
- js call与bind和apply的区别
介绍 在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是thi ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- js修改函数内部的this指向(bind,call,apply)
js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...
- JS中的call()和apply()方法和bind()
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- js 改变this指向的三种方法 bind call apply
先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...
- Bind、Apply、Call三者的区别
1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...
- 自己动手用原生实现 bind/call/apply
大家好!!!注册一年多的第一篇博客. 自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们... 接下来的一段时间, 我都会不定期整理自己理解的js知识点, ...
- js原生函数bind
/*在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了.下面的一个例子能很好的说明这 ...
- js中的bind方法的实现方法
js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...
随机推荐
- Python中集合类型的使用
集合类型 多个不重复元素的无序组合 集合类型的表示 建立非空集合的方式可以用{}来表示 采用set()来表示 集合类型的操作符 S|T 返回一个新集合,这个集合包含S与T中的所有元素. S-T 返回一 ...
- Linux系统平台调优
- shell设置用户自己的环境变量
- C语言实现读取文件所有内容到字符串
#include "stdio.h" #include "string" #include "stdlib.h" using namespa ...
- txt_to_csv
import csv def txt2csv(inf, outf): with open(inf,'r') as fin, open(outf,'w',newline='') as fout: wrt ...
- 【LeetCode】贪心 greedy(共38题)
[44]Wildcard Matching [45]Jump Game II (2018年11月28日,算法群衍生题) 题目背景和 55 一样的,问我能到达最后一个index的话,最少走几步. 题解: ...
- windows平台搭建Mongo数据库复制集(类似集群)(三)
在本篇里面,咱们重点总结一下复制集,以及分析一下它的工作原理 一.常见场景 应用程序和数据库之间的网络连接丢失 计划停机.断电.数据库服务硬盘故障等等 复制可以进行故障转移,复制能让你在副本间均衡读负 ...
- ivew 【provide/inject] 页面刷新实现reload
1.App.vue <template> <div id="app"> <router-view v-if="isRouterAlive&q ...
- class反编译
JD-GUI:http://java-decompiler.github.io/ 离线包在我的文件 下载安装,file选择class文件即可浏览 反编译代码与源码去掉注释后的代码比较接近,虽然比源码损 ...
- mysql 数据库连接状态查询
查看当前数据库进程 show processlist