先了解下bind call apply 的注意点
  • bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数
  • call 不需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数
  • apply 不需要手动调用 第一个参数 this 要指向的对象,后面是 数组参数
看下具体代码
  • bind
function fn(a,b) {
console.log(a,b)
console.log(this,'this')
}
fn(1,2)
// 1 2
// Window 'this'
let obj = {
name:'wg',
age:18
}
let res = fn.bind(obj,2,3) // fn的this指向obj
res()
// 2 3
// {name: 'wg', age: 18} 'this'
  • call
function fn(a,b) {
console.log(a,b)
console.log(this,'this')
}
fn(1,2)
// 1 2
// Window 'this'
let obj = {
name:'wg',
age:18
}
fn.call(obj,2,3) // fn的this指向obj
// 2 3
// {name: 'wg', age: 18} 'this'
  • apply
function fn(a,b) {
console.log(a,b)
console.log(this,'this')
}
fn(1,2)
// 1 2
// Window 'this'
let obj = {
name:'wg',
age:18
}
fn.apply(obj,[2,3]) // fn的this指向obj
// 2 3
// {name: 'wg', age: 18} 'this'

js 改变this指向的三种方法 bind call apply的更多相关文章

  1. 【面试题】JS改变this指向的三种方法

    一.this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window 1.全局作用下 ...

  2. ES5中改变this指向的三种方法

    ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...

  3. 改变this指向的三种方法

    call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...

  4. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  5. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  6. js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  7. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  8. JS模拟实现封装的三种方法

      前  言  继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上 ...

  9. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

随机推荐

  1. ES6扩展——数组扩展

    1.结合扩展运算符使用.通过扩展运算符,在调用函数的时候,把一个数组展开,然后作为这个函数的参数 //结合扩展运算符使用 function foo(a,b,c){ console.log(a); // ...

  2. java变量类型和常量类型

    变量类型 局部变量 实例变量 类变量 public class 变量类型 { //属性:变量 //必须先定义再使用,并初始化 //布尔型:默认值为false //3. 类变量(静态变量) static ...

  3. LNMP zabbix 4.4 安装

    硬件配置需求 环境 平台 CPU/内存 数据库 硬盘 监控主机数 小型 CentOS 2CPU/1GB MySQL.InnoDB 普通 100 中型 CentOS 2CPU/2GB MySQL.Inn ...

  4. Linux下chkconfig

    1.chkconfig命令用于检查,设置系统的各种服务! 2.chkconfig语法 chkconfig [--add] [--del] [--list] [系统服务] 或 chkconfig [-- ...

  5. openwrt开发笔记二:树莓派刷openwrt

    前言及准备 本笔记适用于第一次给树莓派刷openwrt系统的玩家,对刷机过程及注意事项进行了记录,刷机之后对openwrt进行一些简单配置. 使用openwrt源码制作固件需要花费一点时间. 平台环境 ...

  6. Appium问题解决方案(7)- Could not find 'adb.exe' in PATH. Please set the ANDROID_HOME environment variable with the Android SDK root directory path

    背景:运行代码提示找不到ADB An unknown server-side error occurred while processing the command. Original error: ...

  7. DataTable 增加、修改、删除

    using System; using System.Data; using System.Windows.Forms; using DotNet.Utilities; namespace Windo ...

  8. iframe 内容适用高度

    HTML: <div class="content"> <iframe id="frameObj" src="链接" fr ...

  9. 给dubbo贡献源码,做梦都在修bug

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 一 在之前的文章<redis在微服务领域的贡献>中,从一次面试经历中了解了redi ...

  10. Go并发编程--正确使用goroutine

    目录 1. 对创建的gorouting负载 1.1 不要创建一个你不知道何时退出的 goroutine 1.1.1 不要帮别人做选择 1.1.2 不要作为一个旁观者 1.1.3 不要创建不知道什么时候 ...