这三个都是函数自带的方法(Function.prototype),这三个方法都能够改变函数内部 this的指向,

call

//call方法接收三个参数,第一个是this指向,第二个,三个是传递给函数的实参,可以是数字,字符串,数组等类型的数据类型都可以
function fn(n1,n2){
console.log(this);
console.log(n1,n2)
}
fn.call();//=>this:window;
let obj = {fn:fn};
fn.call(obj);//=>this:obj;n1,n2:undefined
fn.call(1,2);//=>this: 1;n1=2,n2=undefined;
fn.call(obj,1,2);//=>this: obj;n1=1,n2=2; //Call方法的几个特殊属性
//非严格模式下
fn.call(undefined);//this=>window
fn.call(null);//this=>window
//严格模式下
"use strict"
fn.call(undefined);//this=>undefined
fn.call(null);//this=>null

apply

//apply方法的使用和call方法基本相同,唯一的区别是,apply方法传参要求是数组类型的,数组内可以任意形式的数据

function fn (n1,n2){
console.log(this);
console.log(n1,n2)
console.log(arguments)
}
let obj = {fn:fn};
fn.applay(abj,[1,2]);
fn.applay(abj,1,2);//报错

fn.applay(abj,[11,'apply',{a:123}]);//注意第二个参数必须是数组,否则会报错
 

bind

//bind和call方法调用形式类似,但是原理完全不同
fn.call(obj,10,20);//=>fn先执行,将fn内的this指向obj,并且把参数10,20传递给fn fn.bind(obj,10,20)//bind是先将fn中的this指向obj,并且将参数10,20预先传递给fn,但是此时的fn并没有被执行,只有fn执行时this指向和传递参数才有作用
fn.bind(obj,10,20);//=>不会有任何输出
fn.bind(obj,10,20)();//=>调用后才会有输出 //=>需求:点击box这个盒子的时候,需要执行fn,并且让fn中的this指向obj
oBox.onclick=fn; //=>点击的时候执行了fn,但此时fn中的this是oBox oBox.onclick=fn.call(opp); //=>绑定事件的时候就已经把fn立即执行了(call本身就是立即执行函数),然后把fn执行的返回值绑定给事件 oBox.onclick=fn.bind(opp);
//=>fn.bind(opp):fn调取Function.prototype上的bind方法,执行这个/*
* function(){
* fn.call(opp);
* }
*/
oBox.onclick=function(){
//=>this:oBox
fn.call(opp);
}

js中三个默认方法call,applay,bind的更多相关文章

  1. 一文带你认识Java8中接口的默认方法

    Java8是Oracle于2014年3月发布的一个重要版本,其API在现存的接口上引入了非常多的新方法. 例如,Java8的List接口新增了sort方法.在Java8之前,则每个实现了List接口的 ...

  2. Java 8——接口中个的默认方法和静态方法

    在Java SE 8之前,interface只是事物的抽象,用来定义统一的抽象事物和描述事物的抽象行为和属性. 但是在Java SE 8中,增加了可以在interface中增加默认实现的行为和事物的静 ...

  3. js中三种定义变量 const, var, let 的区别

    js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...

  4. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  5. js中三种弹出框

    javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...

  6. js中function参数默认值

    --在dreamweaver做网站时,函数定义是在一个*.js文件中,其中定义了一个func,有四个参数,function func(string1,url,flag,icon),然后在另一个asp中 ...

  7. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  8. js 中读取JSON的方法探讨

    方法一:函数构造定义法返回 var strJSON = "{name:'json name'}";  //得到的JSONvar obj = new Function("r ...

  9. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

随机推荐

  1. 洛谷⑨月月赛Round2 官方比赛 OI

    自评: (完成时间3.5时) 第一题 模拟 虽然A了,代码敲得有点慢 第二题 最短路 第一次敲对了,又考虑数据范围和答案范围,改错了,100分改成42分.QAQ. 第三题 乱搞 80分 还可以(因为没 ...

  2. axis2的wsdl无法使用eclipse axis1插件来生成client--解决方法

    使用jetty+axis2实现webservice服务端,且无需使用axis2命令生成服务端代码.仅仅要services.xml配置实现类. project为gradleproject配置文件在src ...

  3. 10g异机恢复后EM无法启动故障处理一例

    之前在自己的測试环境上做了个异机恢复,原来的库上是配置过EM的,可是在恢复的库上去启动EM就报错了.以下看详细解决过程: PS:原主机名为zlm,恢复出来的主机名为bak [root@bak ~]# ...

  4. C# 验证数字的正则表达式集

    验证数字的正则表达式集 博客分类: 正则 正则表达式 验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d ...

  5. js返回16位随机数

    public string GetDataRandom()        {            string strData=DateTime.Now.ToString();            ...

  6. php函数 array_values()

    array_values() 函数返回一个包含给定数组中所有键值的数组,但不保留键名. 提示:被返回的数组将使用数值键,从 0 开始并以 1 递增. $a=array("Name" ...

  7. Java同步容器总结

    <0>StringBuffer适用于多线程场景,StringBuilder适用于字符串拼接[堆栈封闭] `Vector`实现`List`接口,底层和`ArrayList`类似,但是`Vec ...

  8. JQuery 动态创建表单,并自动提交

    前言:写这个是为了实现使用cookie进行自动登录的功能, 下面的代码是一个元素一个元素进行创建和赋值的, (可以尝试下将所有的html代码(form.input)全部拼好以后放到${ } 中,再进行 ...

  9. 前端面试基础-html篇之H5新特性

    h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...

  10. border使用

    border属性 border-width  border-style  border-color  inherit border-style的值:none  dotted(点线)  dashed(虚 ...