博客
关于我
this指向和bind—call—apply
阅读量:704 次
发布时间:2019-03-15

本文共 1972 字,大约阅读时间需要 6 分钟。

this和bind&&call&&apply

this 关键字

  • 每一个函数内部都有一个关键字是 this

  • 可以让我们直接使用的

  • 重点: 函数内部的 this 只和函数的调用方式有关系,和函数的定义方式没有关系

  • 函数内部的 this 指向谁,取决于函数的调用方式

  • 全局定义的函数直接调用,this => window

    function fn() {       console.log(this)}fn()// 此时 this 指向 window
  • 对象内部的方法调用,this => 调用者

    var obj = {       fn: function () {         console.log(this)  }}obj.fn()// 此时 this 指向 obj
  • 定时器的处理函数,this => window

    setTimeout(function () {       console.log(this)}, 0)// 此时定时器处理函数里面的 this 指向 window
  • 事件处理函数,this => 事件源

    div.onclick = function () {       console.log(this)}// 当你点击 div 的时候,this 指向 div
  • 自调用函数,this => window

    (function () {       console.log(this)})()// 此时 this 指向 window

call 和 apply 和 bind

  • 刚才我们说过的都是函数的基本调用方式里面的 this 指向
  • 我们还有三个可以忽略函数本身的 this 指向转而指向别的地方
  • 这三个方法就是 call / apply / bind
  • 是强行改变 this 指向的方法

call

  • call 方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向

  • 语法: 函数名.call(要改变的 this 指向,要给函数传递的参数1,要给函数传递的参数2, ...)

var obj = {    name: 'fqniu' }function fn(a, b) {     console.log(this)  console.log(a)  console.log(b)}fn(1, 2)fn.call(obj, 1, 2)
  • fn() 的时候,函数内部的 this 指向 window
  • fn.call(obj, 1, 2) 的时候,函数内部的 this 就指向了 obj 这个对象
  • 使用 call 方法的时候
    • 会立即执行函数
    • 第一个参数是你要改变的函数内部的 this 指向
    • 第二个参数开始,依次是向函数传递参数

apply

  • apply 方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向

  • 语法: 函数名.apply(要改变的 this 指向,[要给函数传递的参数1, 要给函数传递的参数2, ...])

var obj = {    name: 'fqniu' }function fn(a, b) {     console.log(this)  console.log(a)  console.log(b)}fn(1, 2)fn.apply(obj, [1, 2])
  • fn() 的时候,函数内部的 this 指向 window
  • fn.apply(obj, [1, 2]) 的时候,函数内部的 this 就指向了 obj 这个对象
  • 使用 apply 方法的时候
    • 会立即执行函数
    • 第一个参数是你要改变的函数内部的 this 指向
    • 第二个参数是一个 数组,数组里面的每一项依次是向函数传递的参数

bind

  • bind 方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向

  • 和 call / apply 有一些不一样,就是不会立即执行函数,而是返回一个已经改变了 this 指向的函数

  • 语法: var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)

var obj = {    name: 'fqniu' }function fn(a, b) {     console.log(this)  console.log(a)  console.log(b)}fn(1, 2)var newFn = fn.bind(obj)newFn(1, 2)
  • bind 调用的时候,不会执行 fn 这个函数,而是返回一个新的函数
  • 这个新的函数就是一个改变了 this 指向以后的 fn 函数
  • fn(1, 2) 的时候 this 指向 window
  • newFn(1, 2) 的时候执行的是一个和 fn 一模一样的函数,只不过里面的 this 指向改成了 obj

转载地址:http://xdomz.baihongyu.com/

你可能感兴趣的文章
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>