一.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. elastic

    学习链接 http://rfyiamcool.blog.51cto.com/1030776/1420811?utm_source=tuicool&utm_medium=referral

  2. Java编程思想学习笔记_1(Java内存和垃圾回收)

    1.Java中对象的存储数据的地方: 共有五个不同的地方可以存储数据. 1)寄存器.最快,因为位于处理器的内部,寄存器按需求分配,不能直接控制. 2)堆栈.位于通用RAM,通过堆栈指针可以从处理器那里 ...

  3. html页面的绝对路径和相对路径

    在用springmvc架构开发网站的过程中,离不开开发前台html页面,html经常需要使用本地相关的资源,如:图片,js,css等,一般情况下,我们可以通过使用相对路径的方式来对这些资源进行指向和访 ...

  4. JavaScript中Trim(),TrimStart(),TrimEnd()的实现

    //去除字符串头尾空格或指定字符 String.prototype.Trim= function(c) { if(c==null||c=="") { var str= this.r ...

  5. 第三章 Python容器:列表、元组、字典与集合

      数据结构的分类依据?基本的"数组"在python中是列表, 数据结构的作用?容器,盛放数据,是由原子组成的分子.可以将一群数据进行整合.拆分.重排. 3.2 列表 列表是啥?顺 ...

  6. Web网页性能管理详解

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的 CPU 和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个 ...

  7. css禁止用户选中文本(转)

    body{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE1 ...

  8. jq实现某个标签内,达到一定字数后,剩下的用 ... 显示

    $(".infom_con").each(function(){ var text=$(this).find("a").text(); var len=text ...

  9. python 练习 30

    Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过面向对象的编程语言,那你 ...

  10. robot API笔记2

    robot.conf 设计方案 实现设置测试执行和输出处理. 这个方案实现了 RobotSettings 和 RebotSettings 内部使用的类 该框架. 不应该有这些类需要使用外部.这个包可以 ...