• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 函数中的this指向,以及 修改this指向的 call/apply/bind方法

函数中的this指向,以及 修改this指向的 call/apply/bind方法

作者:csdn_hui 字体:[增加 减小] 来源:互联网 时间:2017-09-04

csdn_hui通过本文主要向大家介绍了this指向,callapplybind,修改this指向等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

函数中的this指向与 call/apply/bind方法

(1)函数中的this指向:this的指向只取决于函数调用/执行时最终调用该函数的对象。
参考网址:http://www.cnblogs.com/pssp/p/5216085.html

示例1:
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b();  //输出结果:undefined

示例2:
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
a.fn();  //输出结果:追梦子

注释:具体的其他关于new 、return等复杂情况,详见上述参考网址。


(2)call/apply/bind方法:都是用来修改this指向的
参考网址:http://www.cnblogs.com/pssp/p/5215621.html

兼容性:
        Call/apply    兼容所有
        Bind               IE9+

注释:
        如果call和apply的第一个参数写的是null或不填,那么this指向的是window对象;(bind也是)
        call/apply方法的调用会调用源函数;而bind方法的调用只是返回源函数(需要额外调用)。

(a)call方法
示例:
var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a,1,2);
注释:call方法的参数解析:(可接收0至多个参数)
第一个参数:可选,修改this指向的对象;
第二个及之后的参数:可选,函数传参;

(b)apply方法
示例:
var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

注释:apply方法的参数解析:(与call有点相似,但最多只接受两个参数)
第一个参数:可选,修改this指向的对象;
第二个参数:可选,一个数组,表示函数传参;


(c)bind方法
注意:bind方法的返回值是一个修改过后的函数,并没有立即调用。
示例:
var a = {
    user:"追梦子",
    fn:function(e,d,f){
        console.log(this.user); //追梦子
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

注释:bind方法的参数解析:(传参比call/apply方法更灵活)
bind可以有多个参数,而且,既可以在bind方法中传参,也可以在执行的时候再次添加传参,总体的参数处理是按照形参的顺序进行的。
bind方法的this指向参数必须在bind方法中传参,否则都默认为指向window对象。

综上所述,call、apply 和 bind 三者的比较总结:
call和apply都是改变上下文中的this,并自动立即执行这个函数。
bind方法可以改变上下文中的this,但不会自动立即执行这个函数;并且,可以将参数在执行的时候添加。
这是它们的区别,根据自己的实际情况来选择使用。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript中 this 指向问题深度解析
  • 详解JavaScript中this的指向问题
  • 函数中的this指向,以及 修改this指向的 call/apply/bind方法

相关文章

  • 2017-05-11最常见和最有用的字符串相关的方法详解
  • 2017-05-11JS中Select下拉列表类(支持输入模糊查询)功能
  • 2017-08-19Javascript设计模式-17-装饰者模式
  • 2017-05-11jquery 手势密码插件
  • 2017-05-11简单实现AngularJS轮播图效果
  • 2017-05-11详解ECMAScript6入门--Class对象
  • 2017-05-11jQuery实现给input绑定回车事件的方法
  • 2017-05-11js轮播图透明度切换(带上下页和底部圆点切换)
  • 2017-05-11Bootstrap 3浏览器兼容性问题及解决方案
  • 2017-05-11BootStrapValidator初使用教程详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js css自定义分页效果
    • Vue.2.0.5过渡效果使用技巧
    • jquery+ajax实现省市区三级联动效果简单示例
    • 微信小程序 弹框和模态框实现代码
    • NodeJs模拟登陆正方教务
    • JS实现的tab切换选项卡效果示例
    • canvas绘制多边形
    • jQuery实现的浮动层div浏览器居中显示效果
    • AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
    • jquery实现百叶窗效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有