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方法的更多相关文章

  1. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  2. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  3. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  4. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  5. JavaScript学习(2)call&apply&bind&eval用法

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...

  6. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

  7. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  8. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  9. 【python学习笔记】9.魔法方法、属性和迭代器

    [python学习笔记]9.魔法方法.属性和迭代器 魔法方法:xx, 收尾各有两个下划线的方法 __init__(self): 构造方法,创建对象时候自动执行,可以为其增加参数, 父类构造方法不会被自 ...

  10. Java8学习笔记(八)--方法引入的补充

    在Java8学习笔记(三)--方法引入中,简要总结了方法引入时的使用规则,但不够完善.这里补充下几种情况: 从形参到实例方法的实参 示例 public class Example { static L ...

随机推荐

  1. 关于homebrew使用时遇到的问题: Error: Could not symlink bin/gdb/usr/local/bin is not writable.

    # 关于homebrew使用时遇到的问题: Error: Could not symlink bin/gdb/usr/local/bin is not writable. 这是我在给我的Mac电脑安装 ...

  2. 20155330 实验二 Java面向对象程序设计

    20155330 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...

  3. HBase——使用Put迁移MySql数据到Hbase

    先上code: /** * 功能:迁移mysql上电池历史数据到hbase * Created by liuhuichao on 2016/12/6. */ public class MySqlToH ...

  4. 1116: [POI2008]CLO

    1116: [POI2008]CLO https://lydsy.com/JudgeOnline/problem.php?id=1116 分析: 单独考虑每个联通块的情况. 设这个联通块里有n个点,那 ...

  5. kallsyms , addr to symbol

    #!/usr/bin/env python # addr2sym.py - resolve addresses to symbols, using a map file # Reads a log f ...

  6. json简单操作

    通过内置的json模块对json数据进行编码 1.对数据进行编码(dumps) import json #使用dumps将python数据结构转换为json data = { , "name ...

  7. 第五章Web应用与应用层协议

    Web应用与应用层协议 本篇博文中的主要参考文献是<计算机网络高级教程>,分别是吴功宜老先生和吴英教授合著.这部教程是我研究生老师所推荐的网络必读科目,由于该教程讲解的基础知识详细,但内容 ...

  8. 从零开始的Python学习Episode 10——函数

    函数 一.函数的创建 简单格式 def function_name(参数表): 函数体 return 如果没有写return,函数会默认返回一个none 二.函数的参数 必需参数: 调用函数时必需参数 ...

  9. 常用JDBC数据库驱动包和类名

    MySQL数据库: 1)驱动包:https://mvnrepository.com/artifact/mysql/mysql-connector-java(下载路径) 2)驱动类名:com.mysql ...

  10. 2019CSUST集训队选拔赛题解(三)

    PY学长的放毒题 Description 下面开始PY的香港之行,PY有n个要去的小吃店,这n个小吃店被m条路径联通起来. PY有1个传送石和n−1个传送石碎片. PY可以用传送石标记一个小吃店作为根 ...