复习javascript中call,apply,bind的用法

darryrzhong 发布于2019-08-26 11:30 / 1611人阅读

摘要：绑定函数被调用时，也接受预设的参数提供给原函数。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。

一直很难理解js中的call apply bind，在w3schools,mdn阅读了，也看了很多相关的文章，今天我来写下我理解的call apply bind

首先创建一个函数

function man(){}

man.prototype = {
    name: "Jack",
    love: "Rose",
    say: function(){
        console.log(this.name +" love " + this.love)
    }
}

var James = new man
James.say()     //Jack love Rose

现在有一个新的对象Mike，但Mike里没有say的方法，但是又要使用say方法应该怎么办呢,那就可以用call和apply来调用James的say方法

var Mike = {
    name: "唐老鸭",
    love: "小朋友"
}

James.say.call(Mike)
James.say.apply(Mike)

此处可以看出，call于apply的用法几乎相同，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

下面的示例，展示了call所传参数的形式 通过call来实现继承

创建一个构造函数product

function product(name, price){
    this.name = name
    this.price = price
}

再创建一个构造函数food，引用product

function food(name, price){
    product.call(this, name, price)
    this.category = "food"
}

var rice = new food("东北大米", "50")
rice    //food {name: "东北大米", price: "50", category: "food"}

使用food构造函数创建的对象实例拥有在country构造函数添加的属性name和price，但category属性是在food构造函数中定义的。

这里也可以看出，call接受的参数第一位是需要传递的this对象，在非严格模式下，如果不需要对this进行改变，可把第一个值设为null，会自动指定到全局对象。后面的值是函数传递进来的参数

使用call调用匿名函数

创建以下函数

var animals = [
    {species: "Lion", name: "King"},
    {species: "Whale", name: "Fail"}
]

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log("#" + i + " " + this.species + ": " + this.name)
    }
    this.print()
  }).call(animals[i], i)
}

此函数通过call调用了匿名函数

apply

apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。

例1，数组之间的追加

var arr1 = ["hello", "world"]
var arr2 = ["animals", "friends"]
Array.prototype.push.apply(arr1, arr2)

例2，获取数组最大最小值

var num = [50, 10, 255, 800]
var maxNum = Math.max.apply(Math, num)
var minNum = Math.min.apply(Math, num)
var maxNum1 = Math.max.call(Math, 50, 10, 255, 800)
console.log(maxNum)  //800
console.log(minNum)  //10

num需要取出最大最小值，使用apply调用Math的方法即可
例3，类数组，伪数组使用数组方法

Array.prototype.slice.apply(document.querySelectorAll("div"))   //打印出所有div
Array.prototype.slice.apply(document.querySelectorAll("div"), [1, 3])
//打印下标1开始3之前结束的div

bind

bind( ) 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当新函数被调用时 this 值绑定到 bind( ) 的第一个参数，该参数不能被重写。绑定函数被调用时，bind( ) 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

例子：
创建一个函数，使用这个函数不论怎么调用都只有一个this的值

this.x = 100
var dog = {
    x: 10,
    getX: function() {
        console.log(this.x)
    }
}

dog.getX()  //10

var hello = dog.getX
hello()  //100 这里因为this指向全局作用域

这里怎么才能调用dog的getX方法呢？
bind可以帮到你

var bindHello = hello.bind(dog)  
bindHello()  //10

从hello函数创建一个绑定函数，把this的值绑定到新的函数上，然后就可以愉快的调用了

总结

call、apply和bind都是改变函数this对象的指向的，bind返回新的函数，而call和apply会立即执行函数

服务器托管专线服务 JS中bind、call和apply的作 javascript_bind用法 apply与call的区别 javascript中apply

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107021.html

复习 JavaScript 关键字 this

摘要：方法调用当一个函数作为一个对象的属性调用时候下标表达式或者点表达式称之为方法调用，此时指向这个对象。作为构造函数调用的方式称为的构造函数，的过程中构造函数的对象的属性和方法将被加到新对象的属性上。 this this是js的一个关键字，只能在函数内部使用，在函数运行时候自动生成的内部对象，代表函数运行时候的作用域指向，使用频率极高！常用的用法与作用域指向函数调用：js里面规定当...

godiscoder 2019-08-20 12:12 评论0 收藏0
把玩 JavaScript 中的 bind

摘要：此模式调用函数的时候，被绑定到全局对象。构造器调用模式如果在一个函数前面带上来调用，那么背地里将会创建一个连接到该函数的成员的新对象，同时会被绑定到新对象上。前言今天闲着无聊随便逛了逛MDN，忽而看到一个方法Function.prototype.bind(),突然发现除了使用这个方法之外都没有仔细琢磨过这个方法。于是乎，找到了kill time的事情-写博客。基础知识简介 ...

shenhualong 2019-08-21 10:33 评论0 收藏0
JavaScript 中 call、apply、bind 用法和区别

摘要：和类似，都是调用函数，并指定函数的值和参数，区别在于传入参数是通过参数列表的形式，传入参数是通过数组的形式方法与前两个不同，它创建一个新的函数，在调用新函数时，会调用原函数，并指定原函数的值和参数。执行的时候并没有调用函数。简介 JavaScript 中有三个方法Function.prototype.call()、Function.prototype.apply()和Function...

wind3110991 2019-08-23 16:06 评论0 收藏0
关于javascript中的bind、call、apply等函数的用法

摘要：其实它们都很简单，但是在处理一些与相关的函数的时候，用来改变函数中的指向，却是必不可少的工具，所以必须掌握好它们的用法。关于javascript中的bind、call、apply等函数的用法我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转前面的文章已经说到this的指向了，那么这篇文章就要说一说和this相关的三个...

lordharrd 2019-08-22 10:53 评论0 收藏0
JavaScript 函数作用域、执行环境(this)、call、apply、bind 的用法

摘要：什么是函数的作用域函数作用域在中，作用域为可访问变量，对象，函数的集合。函数作用域作用域在函数内修改。与函数又有什么关系呢对象是在运行时基于函数的执行环境绑定的。什么是函数的作用域函数作用域：在 JavaScript 中，作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。 this 与函数又有什么关系呢？ this对象是在运行时基于函数的...

1fe1se 2019-08-26 13:47 评论0 收藏0