一.call函数

a.call(b);

简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b)

call()的用法:用在函数上面

var Dog=function(){
this.name="汪星人";
this.shout=function(){
alert(this.name);
}
};
var Cat=function(){
this.name="喵星人";
this.shout=function(){
alert(this.name);
}
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
cat.shout();

如果猫函数中没有shout方法,要达到一样的效果

var Dog=function(){
this.name="汪星人";
this.shout=function(){
alert(this.name);
}
};
var Cat=function(){
this.name="喵星人";
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
dog.shout.call(cat);
cat.shout();

call的作用:函数可以复用

二、apply函数

var xh=
{
name:"小红",
job:"前端工程师"
};
var xm=
{
name:"小明",
job:"js工程师"
};
var xw=
{
name:"小王",
job:"html5工程师"
};
function myjob(gender,age,company)
{
alert(this.name+","+gender+",今年"+age+"岁,在"+company+"担任"+this.job);
}
myjob.call(xh,"女",24,"腾讯");
myjob.call(xm,"男",22,"新浪");
myjob.call(xw,"男",28,"网易");

call函数和apply函数功能一样,区别是第二个参数形式不一样,call传递多个参数,任意形式(传入参数和函数所接受参数一一对应),apply第二个参数必须是数组形式,如a.call(b,2,3); ==>  a.apply(b,[2,3]);

var xh=
{
name:"小红",
job:"前端工程师"
};
var xm=
{
name:"小明",
job:"js工程师"
};
var xw=
{
name:"小王",
job:"html5工程师"
};
function myjob(gender,age,company)
{
alert(this.name+","+gender+",今年"+age+"岁,在"+company+"担任"+this.job);
}
myjob.apply(xh,["女",24,"腾讯"]);
myjob.apply(xm,["男",22,"新浪"]);
myjob.apply(xw,["男",28,"网易"]);

三、bind函数

call,apply和bind都可以“绑架”this,逼迫其指向其他对象

使用上和call,apply的区别,如

xw.say.call(xh);         //对函数直接调用

xw.say.apply(xh);      //对函数直接调用

xw.say.bind(xh)();     //返回的仍然是一个函数,因此后面需要()来调用

传参时可以像call那样

xw.say.bind(xh,"中央大学","一年级")();

由于bind返回的仍然是一个函数,所以也可以在调用时再进行传参

xw.say.bind(xh)("中央大学","一年级");

call,apply,bind函数的更多相关文章

  1. 原生JS实现call,apply,bind函数

    1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...

  2. JS实现call,apply,bind函数

    实现之前的预备知识 ...用作展开 ...用作剩余参数 Object.create()的作用 原型链与构造函数 这些有时间补上吧 call函数实现 Function.prototype.myCall ...

  3. JacaScript实现call apply bind函数

    一.call函数 模拟实现第一步:整体思路 Function.prototype.call2=function(context){ context.fn=this; //1.将函数(谁调用 即this ...

  4. javascript-this,call,apply,bind简述1

    最近在系统的学习面向对象方面的知识,遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用,单独抽出一天时间把这几个烦人的家伙搞定,去学习更深入的内容. 首先介绍一下this的一 ...

  5. this指向与call,apply,bind

    this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...

  6. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  7. apply,call,bind函数作用与用法

    作用 可以把方法借给其它对象使用,并且改变this的指向 a.apply(b,[3,2]);//this指向由a变为b, a的方法借给b使用 实例: function add(a,b){       ...

  8. 实现call、apply 及 bind 函数

    今日学习内容: (1)call 函数的实现步骤: 判断调用对象是否为函数,即使是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况. 判断传入上下文对象是否存在,如果不存在,则设置为 ...

  9. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

随机推荐

  1. PHP基础知识之————PDO预处理语句

    转载处:http://www.cnblogs.com/xiaohuochai/p/6133353.html 定义 在生成网页时,许多PHP脚本通常都会执行除参数之外,其他部分完全相同的查询语句,针对这 ...

  2. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js图片跑马灯效果

    <style. type="text/css">body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding ...

  4. (二)程序中的内存&&栈

    一.程序运行为什么需要内存?基本概念? 内存是程序运行的立足之地,程序需要用内存来存储一些变量. 内存管理最终是由操作系统完成的,内存在本质上是一个硬件器件,由硬件系统提供:内存由操作系统统一管理,为 ...

  5. DOM加载:浏览器渲染和操作顺序(转载 学习中。。。)

    DOM加载:浏览器渲染和操作顺序 1.HTML解析完毕 2.外部脚本和样式表加载完毕 3.脚本在文档内解析并执行 4.HTML DOM完全构造起来 5.图片和外部内容加载 6.网页完成加载 基于这个顺 ...

  6. 工作了3年的JAVA程序员应该具备什么技能?(zhuan)

    http://www.500d.me/article/5441.html **************************************** 来源:五百丁 作者:LZ2016-03-18 ...

  7. gcj_2016_Round1_B

    题目 一个NxN的矩阵,矩阵中每个方格中都有一个数值,且每一行的数值严格单调递增,每一列的数值严格单调递增.分别取出N行和N列,形成2N个长度为N的数组,现在有一个数组丢失,已知剩下的2N-1个长度为 ...

  8. PacBio下机数据解读

    今天被人问起如何看懂三代的下机数据,虽然解决了别人的问题,但感觉自己还是没有搞透. 基本的目录结构: |-- HG002new_O1l_BP_P6_021315b_MB_100pM | |-- D01 ...

  9. 串行通讯之.NET SerialPort

    第1章串行通讯之.NET SerialPort    2 1 枚举串口    2 2 打开/关闭串口    2 3 写数据    3 3.1 写二进制数据    3 3.2 写文本数据    4 4 ...

  10. gulp-webpack工程化实现electron

    参考网站: https://www.npmjs.com/package/babel-loader https://www.npmjs.com/package/gulp https://www.npmj ...