一、arguments的含义
  1. // arguments 是一个对应于传递给函数的参数的类数组对象
  2. function a(){
  3. console.log(arguments);
  4. }
  5. a(); // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
  6. a(1,2,3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
二、Function.prototype.bind()

bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值,例如:f.bind(obj),实际上可以理解为obj.f(),这时f函数体内的this自然指向的是obj;

  1. var a = {
  2. b: function() {
  3. var func = function() {
  4. console.log(this.c);
  5. }
  6. func();
  7. },
  8. c: 'hello'
  9. }
  10. a.b(); // undefined 这里的this指向的是全局作用域
  11. console.log(a.c); // hello
  1. var a = {
  2. b: function() {
  3. var _this = this; // 通过赋值的方式将this赋值给that
  4. var func = function() {
  5. console.log(_this.c);
  6. }
  7. func();
  8. },
  9. c: 'hello'
  10. }
  11. a.b(); // hello
  12. console.log(a.c); // hello
  1. // 使用bind方法一
  2. var a = {
  3. b: function() {
  4. var func = function() {
  5. console.log(this.c);
  6. }.bind(this);
  7. func();
  8. },
  9. c: 'hello'
  10. }
  11. a.b(); // hello
  12. console.log(a.c); // hello
  13. // 使用bind方法二
  14. var a = {
  15. b: function() {
  16. var func = function() {
  17. console.log(this.c);
  18. }
  19. func.bind(this)();
  20. },
  21. c: 'hello'
  22. }
  23. a.b(); // hello
  24. console.log(a.c); // hello
  1. // 分析:这里的bind方法会把它的第一个实参绑定给f函数体内的this,所以里的this即指向{x:1}对象;
  2. // 从第二个参数起,会依次传递给原始函数,这里的第二个参数2即是f函数的y参数;
  3. // 最后调用m(3)的时候,这里的3便是最后一个参数z了,所以执行结果为1+2+3=6
  4. // 分步处理参数的过程其实是一个典型的函数柯里化的过程(Curry)
  5. function f(y,z){
  6. return this.x+y+z;
  7. }
  8. var m = f.bind({x:1},2);
  9. console.log(m(3)); // 6
  1. // 分析:直接调用a的话,this指向的是global或window对象,所以会报错;
  2. // 通过bind或者call方式绑定this至document对象即可正常调用
  3. var a = document.write;
  4. a('hello'); // error
  5. a.bind(document)('hello'); // hello
  6. a.call(document,'hello'); // hello
  1. // 实现预定义参数
  2. // 分析:Array.prototype.slice.call(arguments)是用来将参数由类数组转换为真正的数组;
  3. function list() {
  4. return Array.prototype.slice.call(arguments);
  5. }
  6. var list1 = list(1, 2, 3); // [1,2,3]
  7. // 第一个参数undefined表示this的指向,第二个参数10即表示list中真正的第一个参数,依次类推
  8. var a = list.bind(undefined, 10);
  9. var list2 = a(); // [10]
  10. var list3 = a(1, 2, 3); // [10,1,2,3]
三、原生js实现bind方法
  1. // 方法一,只可绑定,不可传参
  2. Function.prototype.my_bind = function(context){
  3. var self = this;
  4. return function(){
  5. self.apply(context,arguments);
  6. }
  7. }
  8. function a(){
  9. console.log(this.name);
  10. }
  11. a(); // ''
  12. var b = {
  13. name: 'apple'
  14. };
  15. a.bind(b)(); // apple
  16. a.my_bind(b)(); // apple
  1. Function.prototype.my_bind = function() {
  2. var self = this, // 保存原函数
  3. context = Array.prototype.shift.call(arguments), // 保存需要绑定的this上下文
  4. // 上一行等价于 context = [].shift.call(arguments);
  5. args = Array.prototype.slice.call(arguments); // 剩余的参数转为数组
  6. return function() { // 返回一个新函数
  7. self.apply(context, Array.prototype.concat.call(args, Array.prototype.slice.call(arguments)));
  8. }
  9. }
  10. function a(m, n, o) {
  11. console.log(this.name + ' ' + m + ' ' + n + ' ' + o);
  12. }
  13. var b = {
  14. name: 'kong'
  15. };
  16. a.my_bind(b, 7, 8)(9); // kong 7 8 9

JS bind()方法、JS原生实现bind()的更多相关文章

  1. 关于js回调方法 js递归时使用方法

    js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...

  2. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  3. js中call,apply,bind方法的用法

    call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...

  4. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  5. 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

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

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

  7. jquery bind()方法 语法

    jquery bind()方法 语法 作用:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 说明:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行 ...

  8. 【前端基础系列】理解bind方法使用与实现

    方法描述 bind()方法创建一个新函数,当被调用时,将其this关键字设置为提供的值. 语法说明 fn.bind(thisArg,arg1,arg2,..) 参数说明 thisArg:当绑定函数被调 ...

  9. Netty源码学习系列之4-ServerBootstrap的bind方法

    前言 今天研究ServerBootstrap的bind方法,该方法可以说是netty的重中之重.核心中的核心.前两节的NioEventLoopGroup和ServerBootstrap的初始化就是为b ...

  10. RAC中常见的高级用法-bind方法

    RAC操作思想:      Hook(钩子)思想 RAC核心方法:bind      bind方法      假设想监听文本框的内容,并且在每次输出结果的时候,都在文本框的内容拼接一段文字" ...

随机推荐

  1.  «»<>

     空格   «双小于 »双大于 <小于 >大于

  2. Python爬取微博热搜以及链接

    基本操作,不再详述 直接贴源码(根据当前时间创建文件): import requests from bs4 import BeautifulSoup import time def input_to_ ...

  3. 每天进步一点点------创建Microblaze软核(二)

    第四步 进入Platform Studio操作界面通过向导创建软核后,进入到PlatformStudio——内核开发环境.Platform Studio主界面如下图. 在Ports项中,右键点击RS2 ...

  4. C++ - cpprestsdk

    Windows 安装方法: CMake 1.32+,生成过程会将 vcpkg 下载好,配置到系统环境变量,然后用 vcpkg 安装依赖库(github 上有列出需要的依赖库). Github 上的示例 ...

  5. python 字符串是否包含某个子字符串

    方法如下:以后再整理 if str1 in str2: 包含的话,True if str1.find(str2)>=0: 包含的话,返回第一次出现的位置,没有的话为负数 https://www. ...

  6. 水题Eating Soup

    A. Eating Souptime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutput ...

  7. Flask 教程 第十六章:全文搜索

    本文翻译自The Flask Mega-Tutorial Part XVI: Full-Text Search 这是Flask Mega-Tutorial系列的第十六部分,我将在其中为Microblo ...

  8. jmeter的使用--添加自定义函数和导入自定义jar

    1.添加自定义函数,增加  号码生成函数 MobileGenerator和身份证生成函数IdCardGenerator 在package org.apache.jmeter.functions;中增加 ...

  9. django项目日志

    接口中,写一条日志: 日志工具文件如下:

  10. 题解【洛谷P5019】[NOIP2018]铺设道路

    题目描述 春春是一名道路工程师,负责铺设一条长度为 \(n\) 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 \(n\) 块首尾相连的区域,一开始,第 \(i\) 块区域下陷的深度 ...