call apply bind谁与争锋

ECMAscript3中给Function的原型定义了两个方法，它们是`Function.prototype.cal`l和`Function.prototype.apply`。在实际开发中，特别是在一些函数风格的代码编写中，call和apply方法尤为重要，能熟练运用这两个方法，是们真正成为一句javascript程序员的重要一步。

----------引用javascript设计模式与开实践

call() apply()的区别

1.call()方法是第一个参数指定好this的指向和若干个参数执行函数的一个方法
2.apply()方法第一个参数是指定this的指向，第二个参数是一个数组或者类组组执行函数的一个方法
2.当调用javascript函数方法，解释器不会计较形参和实参的数量，类型以及顺序上的区别，javascript参数也是用一个数组来表示的，从意义上说，apply比call的执行率更高一些，我们必要不关心apply里面有多少个参数，我们只有一下子推入进去就可以了。

先看看第一个this可以指向那里，写不不同的类型输出不同的this

先看看两者的语法的区别
call(argthis,arg1,arg2,arg3......)
apply(argthis,[arg1,arg2,arg3....])

1.不传或者传入null,undefined函数都指向window对象
2.传递一个函数的函数名，指向的是这个函数的引用，并不一定是这个引用函数的真正的this,因为this在函数中运行时执行的下上文，并不是在定义时执行的上下文，想理解运行时执行和定义时执行请看一下我上篇的this该何去何从
3.传递的是原始值（数值型，字符串型，布尔类型）都指向其包装对象，比方说String ,Boolean,Number
4.传递的是一个对象，就指象其对象

针对上面四个定义我们做一个初级简单的例子能更加深入的理解一下

function demo(){
     console.log(this)
}     //=>定义一个demo函数，函数体内打印出this的指向，如果光执行这段代码肯定输出window
function test(){}  //=>定义一个test函数
obj = {}   //=>定义一个obj对象
demo.call()   //=>window
demo.call(null) //=>window
demo.call(undefined) //=>window
demo.call(test) //=>function test(){}
demo.call(1) //=>Number
demo.call('ziksang')  //=>String
demo.call(true)  //=>Boolean
demo.call(obj) //=>obj

在写严格模式下我们又要注意的一点

'use strict'
function demo(){
    console.log(this === window)
    console.log(this === null)
    console.log(this === undefined)
    console.log(this == null)
    console.log(this == undefined)
}
demo.call(null)
//=>false true false true true 在严格模式下null就指向null 为什么 == undefined可以和null进行类型转换
demo.call(undefined) 
//=> false false true true true 跟上面同理
demo.call()
//=>false false true true true 本质上就是执行了demo()函数在严格模式下指向undefined

执行一个函数用call apply把this指向一个对象

var name = "windowZiksang"
var info = "window有军魂"
function demo(){
      var and = "是"
      var result = this.name+and+this.info
      console.log(result)
}
var obj={
    name : "ziksang",
    info : "有军魂"
}
demo.call()
demo.apply() //=>其实两者执行的结果是一样的，就像我们上面说的如果我不写任何东西，只是纯粹执行了demo这个方法，
 此时函数体内的this指向的是window下的对象属性，执行出来windowZiksang是window有军魂
demo.call(obj)
demo.apply(obj)//=>还是两者执行的结果是一样的，执行函数demo这个方法的同时还把函数体内的this偷偷指向了obj这个对象，
指向了obj对象体内的name和info，所以执行出来ziksang是有军魂

在实际开发中我们也会不经意的改变this的指向，我们如何修正

 document.getElementById("div").onclick = function(){
       console.log(this.id)  //=>给id为div的dom元素绑定一个click事件，此时这个this指向的就是这个dom元素 输出div
}

如果我们在一个函数里有一个内部函数func我们看看有会发生什么
document.getElementById("div").onclick = function(){
      console.log(this.id)     //=> div  同上
      var func = function(){
             console.log(this.id)   //=>此时输出undefined 因为func函数指向的是window对向 ，在window对象上没有id这个属性，所以会报一个undefined
因为变量的提升不会报错，而在严格模式下就会报错
      }
     func()    //=>执行内部func这个函数
}

那我们如何修正这个func函数，让他的this指向dom元素
document.getElementById("div").onclick = function(){
      console.log(this.id)     //=> div  同上
      var func = function(){
             console.log(this.id)   //=>此时输出 div，因为下面func.call(this)在执
行的时候把this指向了div元素，但我们还可以用其它方式
      }
     func.call(this)    //=>执行内部func这个函数并且把func函数体内的this指向向div这个dom元素
}
`````````````````````
>用匿名函数调用call方法或者apply方法,展示call和apply的用法用途

 **这个例子展示了如何让数组对象里都加一个say()方法**
````````````````````
var person = [
{name : "ziksang",age : 20},
{name : "hello"，age : 21}
]   //=>声明一个数组对象,也可以叫类数组
for(var i = 0;i<person.length;i++){  //=>把数组对象进行一个循环，每个对象进行加say方法
    (function(i){
          this.say = function(){
                 console.log( i + this.name+this.age)
                  //=>0ziksang20   1hello21
          }
         this.say()
    }).call(person[i],i)   //=> 里面是一个自执行匿名函数，正常的匿名自执行函
数是这么写的(function(){})(),用(function(){}).call()是同一个意思，立即执行一
个函数，不同的是用call把其里面的this指针指向了一个对象，进行循环的话
对每个对象都进行的添加，i是传进去的参数，是循环的下标
}

如果我们再把person数组对象打印出来，发现里面每一个对象都有了say方法，然后我们都可以进行调用
for(var j = 0;j<person.length;j++){
     console.log(person[j].say())  //=>0ziksang20   1hello21
}
````````````````````
>再举个javascript设计模式中一个如何修正dom中的this指向

**其实书中怎么说是书中怎么写，如果能有前面的铺垫我再能更细的给大家
写出来我相信，肯定会对大家一定的了解**
````````````
html
    <div id="div1"><div>
script
    var getId = document.getElementById
    getId("div1")  //=>会报错
   //=>给大家解释一下为什么会报错，请先阅读下面的引用后再看我后面一句话
  //=>因为虽然document.getElementById内部的指向的document对象
但是前面我说过很多次this都是运行时执行的，getId引用了document.getElementById这个方法，此时的this就指向了window对象，所以会报错
````````````
 ----引用
     在chrome,firefox,ie10中执行过后就会发现，这优代码抛出一个异常。这是因为许多引擎的document.getElementById方法的内部实现中需要到这个this.这个this本来被期望指向docment，当getElementById如果被下载确使用的话本质指向的就是document对象

--修正
    那我们看看下面如何去修正这个this本人感觉有点绕，我也会慢慢去给大家讲明白
``````````````````
   //=>最外面一层其实本质上是我们自己定义的一个叫document.getElementById的一个方法，采用的是自执行
传了一个js document内部自带的document.getElementById的方法
    document.getElementById = (function(func){
           return function(){    //=>第二层返回一个匿名函数
               return func.apply(document,arguments)  
                  //=>返回一个修正后的document.getElementById这个方法，
那他是如何修正的呢？每次调用的时候都会把document.getElementById
这个引用再次从新指向document对象，然后加上所需要传的参数
           }
     })(document.getElementById)  //=>这个是要传的参数，也是传的方法的document对象下getElementById这个方法的引用

     var getId = document.getElementById  //=>拿到引用
     var div = getId('div1')   //=>把参数写入，此时内部就有一个机制执行了 return func.apply(document,arguments)  代码  修正this
     console.log(div.id)   //=>这里就能正确打印出div.id = div1了
``````````````````
>call apply如何带参数执行出不同的值

``````````````
看这个先看最下面执的一个方法，用call和apply改变了this的指向，指向到了那里再进行上面的执行后结果的分析，我们可以看的出指向了obj对象
var obj = {
    name : "ziksang",
    age : 22,
    say : function(){
        console.log(this.name+this.age)
    }
}
function demo(name){
    console.log(this)  //=>obj{...}  一般来说都是指向window对向，因为this被改变指向obj对象，所以这里打印出obj对象
    console.log(this.name)  //=>ziksang 因为指出obj里面的name，本质上是执行了obj.name
    console.log(name) //=>hello 这里没有加this执行了自己所传的参数 ，这里传了一个hello所以打印出来是一个hello
    this.say() //=>ziksang22   指向obj对象。say方法里的this.name和this.age都指向了obj自己内部的name和age
}
demo.call(obj,"hello")
demo.apply(obj,["hello"])  //=>call和apply都是一个意思，区别就在于两个传参的方式不一样，apply是以一个数组的方式都入，也可以是类数组
``````````````

>我们用自己的方式去实现bind方法

1.Function.prototype.bind是ECMAscript5新增加的一个方法
2.传参和call和apply类似
3.call和apply会改变this的指向后执行这个函数，而bind不会，会返回改变this指向后的引用

**接下来我给大家如何实现一个bind方法**
```````````````
//=>先看看这个
//=>我们在内部Function函数原形上加上一个bind方法，我仔细琢磨过
console.log(typeof Function.prototype) //=>Functoin 而输出不是一个对象，js中Function这种东西很特殊
Function.prototype.bind = function(){
       console.log(this)
}
function demo(){}
demo.bind() //=> function demo(){} 输出的是自己本身的函数引用，本意就是想让大家理解一下这个this的意思 因为自己理解的好久

那就继续下面如何实现一个简单的bind方法
//=>我们先在function原型内部上面加一个bind方法，其实本质上是有的，只用浏览器支持，不然我们就是从写
Function.prototype.bind = function(){
        var self = this   //=>这里的this是保存调用的函数，上面给我大家解释过了，爱不爱我
        return function(){      //=>返回一个匿名函数
              return self.apply(context,arguments)  //=>返回一个函数调用apply方法改变this指向，第二个是所要传在参数
        }
}
var obj = {
      name : "ziksang"
}
var demo = function(){
          console.log(this.name)
}.bind(obj)   //=>这样的写法上面定义过了bind的原理，不会执行函数，只是返回一个改变内部this的函数的引用
demo()  //=>ziksang  再进行执行
```````````````

>证实一下bind只是返回一个函数的引用

``````````````````
document.addEventListener('click',function(){
           console.log(this)   
},false)
//=>document 返回一个document对象
因为document对象上的addEventListener这个方法会自己动执行一个内部要调用的函数，不需手动调用

那我们试试手动调有会怎么样
function demo(){
    console.log(this)
}        //=>调用之后直接打出来window对象
document.addEventListener('click',demo(),false)  //=>这样的话直接默认你调用了demo()这个方法，不会指向document点击事件好，所指向的document对象


证实bind不会调用原函数，只是返回它的一个引用
var obj = {
    name :"ziksang"   //=>声明一个obj对象
}
function demo(first,next){
    console.log(this.name+first+next)
}
document.addEventListener('click',demo.bind(obj,"hello","world"),false)
//=> ziksang hello world    这证明了没有执行原函数，而且改变了this的指向
指向了obj对象，传了参数，很不错
``````````````````

>接下了我们要根据前面的写的一个bind方法我们要继续去加强功能，完善它

```````````````
//=>还是那句话对于难点进行一步一步的分析，先为下面实现复杂一点的方法做一个铺垫

Function.prototype.bind = function(){
            var self = this //=>保存原函数 这里的this指向调用这个方法的函数指针
            var context= Array.prototype.shift.call(arguments)
//=>我学的觉得这是一个工具方法，下面我会给大家讲一些工具方法
            console.log(argthis)
//=>1  输出1,这个this指向arguments类数组对象，借用了Array.prototype原
形上的方法，也是内置的方法来弹出数组第一个值
                        var arg = Array.prototype.slice.call(arguments)
//=>slice方法可以把类数组转为真正的数组
            console.log(arguments)
//=>[3，4，5，6]这里打印出剩余的数组对象
        }
        var demo  = function(){

}.bind(1,3,4,5,6)//=>这里是进行一个方法调用

结合上面的列子再进行加强，上面没有做到bind返回一个新的函数
Function.prototype.bind = function(){
            var self = this
            var context = Array.prototype.shift.call(arguments)
            var args = Array.prototype.slice.call(arguments)
//=>这上面的我就不用说了，前面我已经给大家分析过了
            return function(){
                return self.apply(context,[].concat.call(args,[].slice.call(arguments)))
            }
//=>这里主要返回了一个函数，里面又套了一层让原函数指向传入的context当作函数的体内新的this指向
//=>并且组合两次分别传入的参数，作为新函数的参数
}
var obj = {
    name : 'ziksang'
}
var demo  = function(name,age){
    console.log(this.name)  //=>ziksang
    console.log(name+age) //=>hello20

}.bind(obj,'hello')
 demo(22)
```````````````
>构造函数里的继承方法


比方法父亲会说自己的名子，而孩子一开始不会说，那就要让父亲去教，那我们看看是孩子如何去继承父亲的方法

`````````````````````
  function Father(){                 //=>声明一个父亲类
       this.say = function(){   //=>里面有一个say方法，输出自己的名字
                    this.name = "父亲"
             console.log(this.name)   
       }
          
  }
  function Son(name){    //=>定义了一个儿子类
       this.name = name   //=>从写了名字这个属性，如果不从写，还是会指向this.name="父亲"
       Father.call(this)     //=>把父亲类里的所有方法属性都拿过来用
    把里面的this指向到儿子类里
  }
  var ziksang = new Son("ziksang")
  ziksang.say()   //=>ziksang
`````````````````````

>最后我讲几个借用一些对象原型上的工具方法

````````````````
1.Array.prototype.slice.call()
(function(){
    console.log(arguments) //=>打印出一个具有Length属性的类数组对象
     var a = Array.prototype.slice.call(arguments)
     //=>arguments类数组借用array原型上自带的方法转为真正的数组
    //但在es6里有一个更好的方法Array.from()
     console.log(a) //=>[1,2,3,4,5]
     var b = Array.prototype.slice.call(arguments,0,2)
     //=>转成数组后进行截取
     console.log(b) //=>【1，2】
})(1,2,3,4,5)

2.Array.prototype.push.call()
(function(){
    
     Array.prototype.push.call(arguments,6) 
//=>借用Array原型Push的方法在下标为5的下面添加一个值为6
     console.log(arguments)
     
})(1,2,3,4,5)

var obj1 = {}  声明一个空对象obj
Array.prototype.push.call(obj1,'ziksang')  在空对象下标0下面添加一个ziksang属性，又俱有了Length属性，我称他为伪对象
console.log(obj1)

3.借用Math对象比对数组中的大小
var array = [1,2,3,4,5]
var a = Math.max(1,2,3,4)
var b = Math.max(array) 
console.log(a)  //=>输出4
console.log(b)//=>输出NaN  因为数组是比不了大小的
var c = Math.max.apply(Math,array)
console.log(c) //=>借用Math对象上的max方法来解析数组大小，用call的话不行，只是一个一个传，不能传数组


4、判断是否是一个数组
     var array = [1,2,3,4]
     if(Object.prototype.toString.call(array) === "[object Array]"){

         console.log(true)  //=>在老版本的中判断是否为数组借用Object原形上的方法.toString来判断是什么类形
     }
     var b = Array.isArray(array) //=>es5提供了判断是否为数组类形
     console.log(b)   //=>两都打印出来都为true
````````````````

最后编辑于：2017.12.05 05:09:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 197,368评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,941评论 2赞 374
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 144,369评论 0赞 326
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,848评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,719评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,505评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,904评论 3赞 388
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,528评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,819评论 1赞 293
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,848评论 2赞 314
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,652评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,468评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,912评论 3赞 300
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,095评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,389评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,906评论 2赞 343
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,120评论 2赞 339

call apply bind谁与争锋

推荐阅读更多精彩内容