call、apply、bind方法的作用和区别:

这三个方法的作用都是改变函数的执行上下文,换句话说就是改变函数体内部的this指向,以此来扩充函数依赖的作用域

1.call

作用:用于改变方法内部的this指向

格式:xxx.call(对象名,参数1,参数2,...)  即:将 xxx 方法中的 this 指向 对象名

例子:未使用call方法前,test()中的this指向window,使用后指向obj对象

function test(a,b){
console.log(this);
console.log(a + b);
}
test(1,2); // window 3
var obj = {name:'lqs'};
window.test.call(obj,3,5); // {name:'lqs'} 8

2.apply

作用:和call方法一样是修改内部的 this 指向的,区别在于apply的第二个参数必须是一个数组(部署了Iterator接口的类数组对象也是可以的)

格式:xxx.apply(对象名,[...]) 即:将 xxx 方法中的this 指向 对象名,数组中的元素依次与方法的形参对应

例子:未使用apply方法前,test()中的this指向window,使用后指向obj对象

function test(a,b){
console.log(this);
console.log(a + b);
}
test(1,2); // window 3
var obj = {name:'lqs'};
window.test.call(obj,[3,5]); // {name:'lqs'} 8

3.bind

作用:也是用于改变this的指向

格式:xxx.bind(对象名,参数1,参数2,...)  即:将 xxx 方法中的this 指向 对象名,传参与call一样

例子:未使用bind方法前,foo()中的this指向window,使用后指向obj对象

 var obj = {key:"value"}
var foo = function(){
console.log(this)
}
foo.bind(obj)() // obj

区别:

三者的第一个参数都是this需要指向的对象,但在后续的参数上只有apply是接收一个数组,call和bind用逗号分开

call和apply直接调用,返回的是一个值,而bind不直接调用,返回的是一个函数形式,执行:foo.bind(obj)()

应用场景:

通常情况下call用于对象的继承,真伪数组转换、apply用于找出数组中的最大值和最小值以及数组合并、bind用于vue和react中改变函数this指向

对象继承:

在构造函数中调用父构造函数,但是改变this指向,就可以继承父属性

function superClass () {
this.a = 1;
this.print = function () { console.log(this.a); }
}
function subClass () {
superClass.call(this); // 执行superClass,并将superClass方法中的this指向subClass
this.print();
}
subClass();

类数组与真数组的转换:

类数组:具有length属性的对象,且键为数字或string类型的数字;例如:元素检索 api 返回的都是类数组

document.getElementsByTagNamedocument.querySelectorAll 等等。除了dom api中,常见的 function 中的 arguments 也是类数组

数组 ==> 数组:

var arr = [1,3,5];
var obj = {};
[].push.apply(obj,arr); // { 0:1, 1:3 , 2:5 , length:3 }

类数组 ==> 真数组:

ES5:call、apply、Array API

// 系统自带类数组对象
var divs = document.querySelectorAll('div');
// 自定义类数组对象
var obj = {0:'lqs' , 1:18 , length:2};
var arr = []; // 真数组 // 在高级的浏览器中使用如下的方法是可以实现类数组对象转换为真数组,但是在 IE8 及其以下是不行的
// [].push.apply(arr,divs);
// [].push.apply(arr,obj);
// 为了兼容 IE8 及其以下的浏览器,需要使用数组的 slice 方法
// 数组的 slice 方法不传递参数的时候是将数组中的元素依次遍历然后放到一个 新的数组 中原样返回
var arr2 = [].slice.call(obj);
// 一切以数组为输入,并以数组为输出的API都可用来做数组转换
Array (借用 arguments)
Array.prototype.concat (借用 arguments)
Array.prototype.slice (借用 this)
Array.prototype.map (借用 this)
Array.prototype.filter (借用 this)
const arrayLike = {0: 3,1: 4,2: 5,length: 3}

Array.prototype.slice.call(arrayLike)

Array.apply(null, arrayLike)

Array.prototype.concat.apply([], arrayLike)

Array.prototype.slice.call(arrayLike)

Array.prototype.map.call(arrayLike, x => x)

Array.prototype.filter.call(arrayLike, x => 1)

ES6:Array.from()、... 扩展运算符

// Array.from();方法用于将类数组对象和可遍历(Iterator)对象转换为真数组
var obj = {0:'lqs' , 1:18 , length:2};
var arr = Array.from(obj) // ['lqs',18]
// ... 扩展运算符
// 适用于 iterable 对象 [...doucmnet.querySelector('div')]
// 但在{length:3}这种情况下会抛出异常
// Uncaught TypeError: object is not iterable (cannot read property Symperty Symbol(Symbol.iterator))[...{length:3}]

jQuery:.get() .toArray()和$makeArray(obj)

稀疏数组:

使用Array(n) 将会创建一个稀疏数组,为了节省空间,稀疏数组内含非真实元素,在控制台上将以empty显示

如下:[,,,]与Array(3) 都将返回稀疏数组

> [,,,][empty × 3]   > Array(3)[empty × 3]

当类数组为 { length: 3 } 时,一切将类数组做为 this 的方法将都返回稀疏数组,而将类数组做为 arguments 的方法将都返回密集数组

数组中最大最小值及数组合并:

获取数组中最大、最小的一项

let max = Math.max.apply(null, array);

let min = Math.min.apply(null, array);

实现两个数组合并

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);

console.log(arr1); // [1, 2, 3, 4, 5, 6]

总结:

以上方法中靠谱的数组转换方法

Array.from(arrayLike)

Array.apply(null, arrayLike)

Array.prototype.concat.apply([], arrayLike)

需要考虑稀疏数组转化

Array.prototype.filter.call(divs, x => 1)

Array.prototype.map.call(arrayLike, x => x)

Array.prototype.filter.call(arrayLike, x => 1)

以下方法要注意是否是 iterable object

[...arrayLike]

参考:

https://www.cnblogs.com/deng-jie/p/15038342.html

https://wenku.baidu.com/view/533ab9c6514de518964bcf84b9d528ea80c72f54.html

https://wenku.baidu.com/view/bfd955c1514de518964bcf84b9d528ea81c72f77.html

https://blog.csdn.net/weixin_39828457/article/details/111701235

call apply bind的作用及区别? 应用场景?的更多相关文章

  1. call,apply,bind的用法及区别

    <script> function test(){ console.log(this) } // new test(); //函数调用call方法的时候,就会执行. //call的参数:第 ...

  2. bind函数作用、应用场景以及模拟实现

    bind函数 bind 函数挂在 Function 的原型上 Function.prototype.bind 创建的函数都可以直接调用 bind,使用: function func(){ consol ...

  3. apply、bind、call方法的作用与区别

    js中call.apply.bind方法的作用和区别 1. call方法 作用:专门用于修改方法内部的 this 指向 格式:xxx.call( 对象名, 参数1, 参数2 , ...);.即:将 x ...

  4. call() 、 apply() 、bind()方法的作用和区别!

    从一开始,我是在书上看到关于bind().call() 和 apply(), 不过长久以来,在工作中与网上接触到了很多关于这三个方法的使用场景,对这三个方法也算是比较熟悉了.所以把他们的作用和区别简单 ...

  5. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  6. js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?

     壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...

  7. call(),apply(),bind() 区别和用法

    call call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表.当第一个参数为null.undefined的时候,默认指向window. var arr = [1, 2, 3, 8 ...

  8. js的call,apply,bind的使用与区别

    在原生js中会有三个很常见的函数,call,apply,bind 他们的作用就是改变当前函数的this指针, 但是细微来说他们还是有不同的. 1)call,apply都是执行某一函数,发现this有变 ...

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

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

随机推荐

  1. Struct2中三种获取表单数据的方式

    1.使用ActionContext类 //1获取ActionContext对象 ActionContext context = ActionContext.getContext(); //2.调用方法 ...

  2. 学生管理系统(python实现)

    # 定一个列表,用来存储所有的学生信息(每个学生是一个字典) info_list = [] def print_menu(): print("------------------" ...

  3. iperf/LANSpeedTest网络传输速度测试工具

    最近公司测试限速,搜集软件发现两款,iperf,LANSpeedTest. iperf,多平台. LANSpeedTest,读写显示,操作简单. 局域网测试传输,优先考虑UDP. iperf Iper ...

  4. 比较爽的导航查询 功能 - SqlSugar ORM

    1.导航查询特点 作用:主要处理主对象里面有子对象这种层级关系查询 1.1 无外键开箱就用 其它ORM导航查询 需要 各种配置或者外键,而SqlSugar则开箱就用,无外键,只需配置特性和主键就能使用 ...

  5. [linux tips] puppet client ssl 证书过期

    问题: [root@control-01 .ssh]# puppet agent -tv Warning: Unable to fetch my node definition, but the ag ...

  6. create-react-app的TS支持以及css模块化

    开始: 利用官方脚手架,搭建react工程.参考:https://react.docschina.org/docs/create-a-new-react-app.html. 过程: 1.暴露webpa ...

  7. python中的sort用法

    内置的列表类型提供sort的方法 可以根据多项指标给list实例中的元素排序.在默认情况下,sort方法总是按照自然升序排列列表内的元素 #升序排列 list1=[2,3,1,2,5] list1.s ...

  8. p2p-tunnel 打洞内网穿透系列(三)TCP转发访问内网web服务

    系列文章 p2p-tunnel 打洞内网穿透系列(一)客户端配置及打洞 p2p-tunnel 打洞内网穿透系列(二)TCP转发访问远程共享文件夹 p2p-tunnel 打洞内网穿透系列(三)TCP转发 ...

  9. PHP反序列化链分析

    前言 基本的魔术方法和反序列化漏洞原理这里就不展开了. 给出一些魔术方法的触发条件: __construct()当一个对象创建(new)时被调用,但在unserialize()时是不会自动调用的 __ ...

  10. SUSE系统---keepalived的搭建

    作为博客第一篇,先小尝初试一下搭建keepalived,因为项目需要搭建集群,为了满足需要,需要服务器对外暴露个虚拟IP,进行集群部署. 第一步:先把keepalived.tra.gz压缩包放到相应目 ...