看this指向谁,要看执行时而非定义时(箭头函数除外)。函数没有绑定在对象上调用,非'strict'模式下,this指向window,否则为undefined

改变this指向的方法

1. apply,立即执行

调用方法 fun.apply('想让this指向谁'[,arr]);

参数以数组形式传入

举个栗子(非严格模式):

function fun (params1, params2, params3) {    
console.log('this:', this);    console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.apply(obj, [1, 2, 3]);
结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3

2. call,立即执行

调用方法 fun.call('想让this指向谁'[,param1,param2,param3…]);

与apply的入参不同,功能一样

举个栗子(非严格模式):

function fun (params1, params2, params3) {
console.log('this:', this);
console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.call(obj, 1, 2, 3); 结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3

3.bind,返回一个函数,需要再次调用,bind是javascript高版本的方法,使用时需注意浏览器兼容性

调用方法 fun.bind('想让this指向谁'[,param1,param2,param3…]);

与call入参相同,bind方法是apply和call的升级版

function fun (params1, params2, params3) {
console.log('this:', this);
console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.bind(obj, 1, 2, 3)(); 结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3

有趣的this以及apply,call,bind方法的更多相关文章

  1. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  2. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  3. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  4. 重写apply, call, bind方法

    重写apply, call, bind方法 //原生JavaScript封装apply方法,第四版 Function.prototype.applyFour = function(context) { ...

  5. 简单模拟实现javascript中的call、apply、bind方法

    目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子 读完<你不知道的JavaScript--上卷>中关于this的介绍和深入的章节后,对于this的 ...

  6. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  7. javascript中函数的call,apply及bind方法

    call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,  [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...

  8. js中的call()、apply()和bind()方法的区别

    call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象. 下面给出一个例子: function add(a,b){ return a+b; ...

  9. 继承:call、apply、bind方法

    javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. call,apply,bind这 ...

随机推荐

  1. [Xcode 实际操作]七、文件与数据-(23)UI Testing系统界面测试功能的使用

    目录:[Swift]Xcode实际操作 本文将演示UI Testing系统界面测试功能的使用. 如果项目中尚未引入界面测试功能,请点击项目属性面板->[General]面板左下角的[+]图标 - ...

  2. Tcl/Tk语言学习------拆分字符串

    字符串的拆分 前言 字符串的处理是每种语言经常会遇到的问题,tcl作为一门脚本语言自然也不例外,关于字符串的拆分,一般会有两种情况:1.使用单个字符拆分,2.使用字符串拆分. 1.使用单个字符拆分字符 ...

  3. 覆盖equals方法时请遵守通用约定

    覆盖equals方法时请遵守通用约定   覆盖equals方法看起来很简单,但是有许多覆盖方式会导致错误,并且后果很严重.最容易避免这种类问题的方法就是不覆盖equals方法,在这种情况下,类的每个实 ...

  4. java面试基础问题

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  5. 最近工作用到压缩,写一个zip压缩工具类

    package test; import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream ...

  6. [题解](单调队列)luogu_P2216_BZOJ_1047 理想的正方形

    调了半天,发现这个写法确实极易错...... 对于每列都维护一个单调队列记录最大最小值,这样一次操作后就把最大最小值压到了一维, 然后再对这一行维护一个单调队列,每次更新ans值,然而对于数组和队列下 ...

  7. 牛客网Java刷题知识点之什么是死锁、死锁产生的4个必要条件、死锁的解除与预防

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?query=&asc=true&order=&page=16 ...

  8. VS局域网断点调试设置

    1.电脑文档文件夹下\IISExpress\config文件内找到applicationhost.config文件编辑 找到<sites>节点 找到你要编辑的site节点 在<bin ...

  9. 实现dedecms(PC端)全站动态浏览 并实现伪静态

    dedecms默认是生成静态文件,如何实现织梦(PC端)全站动态浏览呢? 织梦全站动态浏览方法 1. 修改首页为动态浏览 后台-生成-更新首页-勾选“仅动态浏览” 2. 修改栏目页为动态浏览 ①添加或 ...

  10. 洛谷 P2984 [USACO10FEB]给巧克力Chocolate Giving

    题目描述 Farmer John is distributing chocolates at the barn for Valentine's day, and B (1 <= B <= ...