JS bind()方法、JS原生实现bind()
一、arguments的含义
// arguments 是一个对应于传递给函数的参数的类数组对象
function a(){
console.log(arguments);
}
a(); // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
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;
var a = {
b: function() {
var func = function() {
console.log(this.c);
}
func();
},
c: 'hello'
}
a.b(); // undefined 这里的this指向的是全局作用域
console.log(a.c); // hello
var a = {
b: function() {
var _this = this; // 通过赋值的方式将this赋值给that
var func = function() {
console.log(_this.c);
}
func();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 使用bind方法一
var a = {
b: function() {
var func = function() {
console.log(this.c);
}.bind(this);
func();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 使用bind方法二
var a = {
b: function() {
var func = function() {
console.log(this.c);
}
func.bind(this)();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 分析:这里的bind方法会把它的第一个实参绑定给f函数体内的this,所以里的this即指向{x:1}对象;
// 从第二个参数起,会依次传递给原始函数,这里的第二个参数2即是f函数的y参数;
// 最后调用m(3)的时候,这里的3便是最后一个参数z了,所以执行结果为1+2+3=6
// 分步处理参数的过程其实是一个典型的函数柯里化的过程(Curry)
function f(y,z){
return this.x+y+z;
}
var m = f.bind({x:1},2);
console.log(m(3)); // 6
// 分析:直接调用a的话,this指向的是global或window对象,所以会报错;
// 通过bind或者call方式绑定this至document对象即可正常调用
var a = document.write;
a('hello'); // error
a.bind(document)('hello'); // hello
a.call(document,'hello'); // hello
// 实现预定义参数
// 分析:Array.prototype.slice.call(arguments)是用来将参数由类数组转换为真正的数组;
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1,2,3]
// 第一个参数undefined表示this的指向,第二个参数10即表示list中真正的第一个参数,依次类推
var a = list.bind(undefined, 10);
var list2 = a(); // [10]
var list3 = a(1, 2, 3); // [10,1,2,3]
三、原生js实现bind方法
// 方法一,只可绑定,不可传参
Function.prototype.my_bind = function(context){
var self = this;
return function(){
self.apply(context,arguments);
}
}
function a(){
console.log(this.name);
}
a(); // ''
var b = {
name: 'apple'
};
a.bind(b)(); // apple
a.my_bind(b)(); // apple
Function.prototype.my_bind = function() {
var self = this, // 保存原函数
context = Array.prototype.shift.call(arguments), // 保存需要绑定的this上下文
// 上一行等价于 context = [].shift.call(arguments);
args = Array.prototype.slice.call(arguments); // 剩余的参数转为数组
return function() { // 返回一个新函数
self.apply(context, Array.prototype.concat.call(args, Array.prototype.slice.call(arguments)));
}
}
function a(m, n, o) {
console.log(this.name + ' ' + m + ' ' + n + ' ' + o);
}
var b = {
name: 'kong'
};
a.my_bind(b, 7, 8)(9); // kong 7 8 9
JS bind()方法、JS原生实现bind()的更多相关文章
- 关于js回调方法 js递归时使用方法
js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- js中call,apply,bind方法的用法
call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- jquery bind()方法 语法
jquery bind()方法 语法 作用:bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 说明:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行 ...
- 【前端基础系列】理解bind方法使用与实现
方法描述 bind()方法创建一个新函数,当被调用时,将其this关键字设置为提供的值. 语法说明 fn.bind(thisArg,arg1,arg2,..) 参数说明 thisArg:当绑定函数被调 ...
- Netty源码学习系列之4-ServerBootstrap的bind方法
前言 今天研究ServerBootstrap的bind方法,该方法可以说是netty的重中之重.核心中的核心.前两节的NioEventLoopGroup和ServerBootstrap的初始化就是为b ...
- RAC中常见的高级用法-bind方法
RAC操作思想: Hook(钩子)思想 RAC核心方法:bind bind方法 假设想监听文本框的内容,并且在每次输出结果的时候,都在文本框的内容拼接一段文字" ...
随机推荐
- «»<>
空格 «双小于 »双大于 <小于 >大于
- Python爬取微博热搜以及链接
基本操作,不再详述 直接贴源码(根据当前时间创建文件): import requests from bs4 import BeautifulSoup import time def input_to_ ...
- 每天进步一点点------创建Microblaze软核(二)
第四步 进入Platform Studio操作界面通过向导创建软核后,进入到PlatformStudio——内核开发环境.Platform Studio主界面如下图. 在Ports项中,右键点击RS2 ...
- C++ - cpprestsdk
Windows 安装方法: CMake 1.32+,生成过程会将 vcpkg 下载好,配置到系统环境变量,然后用 vcpkg 安装依赖库(github 上有列出需要的依赖库). Github 上的示例 ...
- python 字符串是否包含某个子字符串
方法如下:以后再整理 if str1 in str2: 包含的话,True if str1.find(str2)>=0: 包含的话,返回第一次出现的位置,没有的话为负数 https://www. ...
- 水题Eating Soup
A. Eating Souptime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutput ...
- Flask 教程 第十六章:全文搜索
本文翻译自The Flask Mega-Tutorial Part XVI: Full-Text Search 这是Flask Mega-Tutorial系列的第十六部分,我将在其中为Microblo ...
- jmeter的使用--添加自定义函数和导入自定义jar
1.添加自定义函数,增加 号码生成函数 MobileGenerator和身份证生成函数IdCardGenerator 在package org.apache.jmeter.functions;中增加 ...
- django项目日志
接口中,写一条日志: 日志工具文件如下:
- 题解【洛谷P5019】[NOIP2018]铺设道路
题目描述 春春是一名道路工程师,负责铺设一条长度为 \(n\) 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 \(n\) 块首尾相连的区域,一开始,第 \(i\) 块区域下陷的深度 ...