【前端学习笔记】call、apply、bind方法
1.call()方法:
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// 定一个点p
var p = {x:1, y:1};
// 调用call 方法,此时p点直接会移动。
move.call(p,1,2);
console.log(p); // --> {x:2,y:3}
2.apply()方法:
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// 定一个点p
var p = {x:1, y:1};
// 调用apply方法,此时p点直接会移动。
move.apply(p,[1,2]);
console.log(p); // --> {x:2,y:3}
3.bind()方法:
/** 函数作为返回值--bind **/
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// // // 定一个点p
var p = {x:1, y:1};
// // bind方法收受一个参数,并返回一个接受余下参数的函数过程。此时p点并没有移动。
var pmove0 = move.bind(p);
console.log(p); // --> {x:1,y:1}
// // 这时p移动到了(2,3)位置。
pmove0(1,2);
console.log(p); // --> --> {x:2,y:3}
// 当然你也可以这样调用
var pmove1 = move.bind(p,1);
console.log(p);
pmove1(2);
console.log(p);
// 或者这样调用
var pmove2 = move.bind(p,1,2);
console.log(p);
pmove2();
console.log(p);
//bind()兼容写法
if (!Function.prototype.bind) { //如果原型上没有bind方法
Function.prototype.bind = function (context) {
var args = arguments, //获取要传入的所有参数
obj = arguments[0], //获取要绑定的上下文
func = this; //获取要调用的函数
return function(){ //返回一个新的函数
var argc = Array.prototype.slice.call(args,1); //获取bind的剩余传入参数
Array.prototype.push.apply(argc,arguments); //将调用时的参数放到最后
return func.apply(obj,argc); //使用新的this执行func函数
}
}
}
4.call()、apply()方法改变this指向
//例子调用apply()方法,call()方法相同
function test(){
console.log('I am test');
}
var obj ={
move:function(x,y){
console.log(x);
console.log(y);
console.log(this); // --> obj{move:function(){}}
}
}
obj.move(44,55);
// 调用apply方法
obj.move.apply(test,[66,88]); // --> function test(){ console.log('I am test') ;}
5.bind()方法改变this指向
//调用bind()方法
function test(){
console.log('I am test');
}
var obj ={
move:function(x,y){
console.log(x);
console.log(y);
console.log(this);
}
}
obj.move(44,55);// this --> obj{move:function(){}} var testMove = obj.move.bind(test);
testMove(66,88); // this --> function test(){ console.log('I am test'); };
【前端学习笔记】call、apply、bind方法的更多相关文章
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- JavaScript学习(2)call&apply&bind&eval用法
javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- 【python学习笔记】9.魔法方法、属性和迭代器
[python学习笔记]9.魔法方法.属性和迭代器 魔法方法:xx, 收尾各有两个下划线的方法 __init__(self): 构造方法,创建对象时候自动执行,可以为其增加参数, 父类构造方法不会被自 ...
- Java8学习笔记(八)--方法引入的补充
在Java8学习笔记(三)--方法引入中,简要总结了方法引入时的使用规则,但不够完善.这里补充下几种情况: 从形参到实例方法的实参 示例 public class Example { static L ...
随机推荐
- JQuery补充——获取与设置表单值
//写jQuery代码时注意前面一定要记得加$(function(){});,在文档加载完成后进行代码的编写 使用jQuery的表单对象属性来选择被选中的项::checked,详见文档选择器部分 根据 ...
- 安装虚拟机与Linux的学习
#虚拟机 在安装虚拟机之前,我先上网查了一些关于虚拟机的知识. 虚拟机,即Virtual Machine,在计算机科学中的体系结构裏,是指一种特殊的软件,他可以在计算机平台和终端用户之间创建一种环境, ...
- 20155307 2016-2017-2《Java程序设计》课程总结
预备作业1 预备作业1 预备作业1 第1周作业 第2周作业 第3周作业 第4周作业 第5周作业 第6周作业 第7周作业 第8周作业 第9周作业 第10周作业 自认为写得最好一篇博客是?为什么? 是这篇 ...
- 使GDAL库支持中文路径或中文文件名的处理方法
之前生成的gdal 2.1.1动态库,在通过命令行执行时,遇到有中文路径或中文图像名时,GDALOpen函数不能正确的被调用,如下图: 解决方法: 1. 在所有使用GDALAllRegist ...
- day 1类 对象 属性 方法
1. 解决吃啤酒鸭的问题 第一种方式(面向过程): 1)养鸭子 2)鸭子长成 3)杀 4)作料 5)烹饪 6)吃 7)卒 第二种方式(面向对象): 1)找个卖啤酒鸭的人 2)给钱 交易 3)吃 4)胖 ...
- day4 边缘检测Canny
1.canny边缘检测 # coding=utf-8 import cv2 import numpy as np filename = 'woman.JPEG' #读入图像,以灰度格式 img = c ...
- 1245 最小的N个和
1245 最小的N个和 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 有两个长度为 N 的序列 A 和 B, ...
- protobuf工程的编译以及使用
一. 获取Protocol Buffer 1.1 获得源码 Github:ProtocolBuffer源码 Git clone之:git clone https://github.com/google ...
- Python接口测试实战4(上) - 接口测试框架实战
如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...
- 如何停止AAD服务
Connect-MsolService (Get-MSOLCompanyInformation).DirectorySynchronizationEnabled 用这个命令查看是enable还是Dis ...