数组追加

      //用apply拼接
var arr1=[12,'name:foo',2048];
var arr2=['Joe','Hello'];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);//(5) [12, "name:foo", 2048, "Joe", "Hello"]
//用call拼接
var arr1=[12,'name:foo',2048];
var arr2=['Joe','Hello'];
Array.prototype.push.call(arr1,arr2);
console.log(arr1);//(4) [12, "name:foo", 2048, Array(2)] Array(2) ["Joe", "Hello"]是arr2只占一位,然后在第三位下面又分2位

获取数组中的最大值和最小值

      //对比call和apply (参数明确时用call)
var numbers=[25,456,86,-45];
var maxNum=Math.max.apply(Math,numbers)//传入的是一个数组
console.log(maxNum);//
var numbers=[25,456,86,-45];
var maxNum=Math.max.call(Math,25,456,86,-45)//传入的一个个参数
console.log(maxNum);//

验证是否是数组(前提是toString()方法没有被重写过)

      var arr=[1,2,3,4,5];
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
isArray(arr);
console.log(isArray(arr))//true

apply的用法

       function log(msg)  // 常规写法
{
console.log(msg);
}
log(1);//
log(1,2);//1 1

 用apply的方法

       function log()
{
console.log.apply(console,arguments);
}
log(1);//
log(1,2);//1 2

bind的用法

           //常规写法
            var foo = {
bar : 1,
eventBind: function(){
console.log(this)
var _this = this;
$('.someClass').on('click',function(event) {
// Act on the event
console.log(_this.bar); //
});
}
}
foo.eventBind();          
         //bind的写法
        var foo = {
bar : 1,
eventBind: function(){
$('.someClass').on('click',function(event) {
// Act on the event
console.log(this.bar); //
}.bind(this));
}
}
  foo.eventBind();

bind() 创建了一个函数,当这个click事件绑定在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,这里我们传入想要的上下文 this(其实就是 foo ),到 bind() 函数中。
然后,当回调函数被执行的时候, this 便指向 foo 对象。

案例

    var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //3 此时输出的为3 var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3 //此时输出的为3

在Javascript中,多次 bind() 是无效的。更深层次的原因,bind() 的实现,相当于使用函数在内部包了一个 call / apply,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。
bind()返回的内容

       var obj = {
x: 81,
}; var foo = {
getX: function() {
return this.x;
}
}
var a = foo.getX.bind(obj); //
console.log(a()); //
// console.log(foo.getX.bind(obj)()); //81 call和apply是立即执行,而bind返回的是函数

call 方法

            //使用call方法调用匿名函数
var peoples=[
{name:'Jane',age:16},
{name:'Maria',age:15}
]
for(var i=0;i<peoples.length;i++){
(function(i){
this.print=function(){
console.log(i+"----" +this.name+"---"+this.age);
}
this.print();
}).call(peoples[i],i)
}
      //使用call方法调用父构造函数
function Product(name,price){
this.name=name;
this.price=price
if(price < 0){
throw RangeError('Connot create product'+this.name+'with a negative price');
}
}
function Food(name,price){
Product.call(this,name,price);
this.category='food';
}
var cheese = new Food('feta', 5);
console.log(cheese);//Food {name: "feta", price: 5, category: "food"}

简单用法

          function cat(){
}
cat.prototype={
food:"fish",
say:function(){
alert("I love "+this.food);
}
}
var blackCat = new cat;
blackCat.say();
var whiteDog = {food:"bone"};
console.log(whiteDog);
blackCat.say.apply(whiteDog);

总结:

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用后续参数传参;

apply 、 call 会立刻执行,而bind的回调函数

apply传入的是数组apply(this,[argu1,argu2,argu3,argu4]),call是call(this,argu1,argu2,argu3,argu4),如果传入的参数个数是已知的,可以用call方法。如果个数未知,用apply方法。

-------------------------------------------------------------------------------------------------2018-06-04-----------------------------------------------------------------------------------------------------------------------

        var obj={
name:"Jack",
getName:function(age,gender){
console.log(this.name)
console.log(age)
console.log(gender)
}
}
obj.getName(12,'男')//obj自己调用 var People={
name:"Jane"
}
obj.getName.call(People,15,'男') //call
obj.getName.apply(People,[15,'男']) //apply
var a = obj.getName.bind(People,15,'男') // bind返回的是一个回调函数
a()

当bind和call复用的时候

                 function fn(name){
this.name=name
console.log(this.name)
}
var a = fn.bind.call(fn,{},'Jack'); //第一个参数是bind要调用的函数,第二个参数是call函数执行函数执行时的上下文,依次是传入函数的参数
a()
//等同于
var orgBindFun = Function.prototype.bind;
var b = orgBindFun.call(fn,null,'Jack')
b()

call、apply、bind的用法的更多相关文章

  1. JavaScript学习(2)call&apply&bind&eval用法

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...

  2. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

  3. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  4. js call().apply().bind()的用法

    function Person(age) { this.age = age; } Person.prototype.sayHi = function (x, y) { console.log((x + ...

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

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

  6. ES5-call,apply,bind的用法

    区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ...

  7. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  8. 如何实现new,call,apply,bind的底层原理。

    new做了什么? new是用来实例化对象的,当new了一个对象后 1.创建一个新对象 2.将构造函数的作用域赋值给新对象(this指向新对象) 3.执行构造函数里面的代码(为这个新对象添加属性) 4. ...

  9. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  10. js中bind的用法,及与call和apply的区别

    call和apply的使用和区别不再做阐述,可以参考我的另一篇随笔<JavaScript中call和apply方法的使用>(https://www.cnblogs.com/lcr-smg/ ...

随机推荐

  1. 从零开始学spring cloud(一) -------- spring cloud 简介

    1.微服务简介 1.1.单体架构 一个归档包(例如war格式)包含了应用所有功能的应用程序,我们通常称之为单体应用.架构单体应用的方法论,我们称之为单体应用架构. 缺点:1. 复杂性高以笔者经手的一个 ...

  2. 创建第一次C语言程序

    在这里我以VS2015为例,做演示.为什么要去演示怎样创建项目尼,因为我写第一个程序时,不知道该怎样用VS创建我的第一个应用程序. 第一步:打开VS环境如下 第二步:在开始出点击“新建项目”或在右上角 ...

  3. 20175234 2018-2019-2 《Java程序设计》第四周学习总结

    20175234 2018-2019-2 <Java程序设计>第四周学习总结 教材学习内容总结 教材学习了子类,其重点是方法重写.对象的上转型对象和多态,强调了面向抽象编程的思想. 学习I ...

  4. Python:每日一题001

    题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? **程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. 个人解 ...

  5. uni-app开发一次,覆盖多端的前端框架

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 一套代码,运行多个平台 uni-app实现了一套代码, ...

  6. HTTP1.1协议-RFC2616-中文版

    转自:http://www.cnblogs.com/k1988/archive/2010/01/12/2165683.html 说明 本文档规定了互联网社区的标准组协议,并需要讨论和建议以便更加完善. ...

  7. lambda 匿名函数

    # 普通python函数 def func(a,b,c): return a+b+c print func(1,2,3) # 返回值为6 # lambda匿名函数 f = lambda a,b,c:a ...

  8. ASP.NET对大文件上传的解决方案

    在ASP.NET 开发的过程中,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的做到多线程的操控和上传进度的显示.笔者在此给大家推荐一款简单易用的上传组件,从而快速便捷得解决了 ...

  9. SpringMVC源码解读 - HandlerMapping - RequestMappingHandlerMapping请求分发

    AbstractHandlerMethodMapping实现接口getHandlerInternal,定义查找流程 RequestMappingInfoHandlerMapping根据RequestM ...

  10. C#情怀与未来

    C#情怀与未来,怨天尤人还是抓住机会,能否跟上dnc新时代浪潮?   经常看到有.NET圈子在讨论是否应该转其它语言   C#情怀是一方面,如果觉得C#未来没前途,光靠情怀是撑不住的, 建议对C#未来 ...