前言

前段时间面试遇见一题,题目内容大概是

function Parent() {
this.prop = 'parent';
} Parent.prototype.get = function() {
alert(this.prop);
}; Parent.prototype.show = function() {
setTimeout(this.get, 100);
}; var child = new Parent();
child.show(); // ?

分析

上述题目考察的是this的指向性这个经典问题。

众所周知,setTimeout是window对象的一个属性,主要起到延迟给定函数执行的作用。setTimeout(fn, delay),因此this.get的这个this指向的是window对象,但是我们并没用在window对象上定义相应的get函数,所以会报错,而不是调用构造函数Parent的原型中的get方法。

怎么改?

经过上面的分析,我们知道setTimeout(this.get, 100)会报错,但是如果我们想正常调用并且alert出正确的值,应该怎么改?

改动的原理很明确,就是将setTimeout中的this指向Parent.prototype,但是单纯的将this.get改成Parent.prototype.get仍然没有alert出真正的parent,而是undefined,原理仍然是原型中的get方法在通过实例对象child调用时内部的this仍然指向window对象。所以我们只能换种思路解决了

ps: 这个当时卡壳了,没答上来,汗。。。

思路1

Parent.prototype.show = function (){
var that = this;
setTimeout(this.get.call(that), 100);
}

这种方法在很多框架中经常使用,即先存储this默认指向的作用域,然后改变函数内部绑定的作用域来实现。ps: 不通过that存储,直接传递this也可

思路2

ES5中对函数方面唯一扩展是新增了一个bind函数,用于劫持函数作用域,并预先添加更多参数,然后返回绑定了新作用域的函数。而现在我们也可以使用它,其实这个思路在MDN上有相应的介绍使用,哎,只怪自己的年少无知。。。

Parent.prototype.show = function() {
setTimeout(this.get.bind(this), 100);
};

bind/call/apply

三者都是用于绑定函数作用域,区别如下:

  • call 是obj.method()到method(obj)的变换,返回函数调用结果,所需参数依次用逗号分割添加至obj尾部。
  • apply 功能同call,区别是传递参数的方式不是call的那种参数列表形式,而是以数组或类数组形式传递。
  • bind 返回绑定作用域后的一个新函数,不会执行函数

我们可以通过apply方法实现bind函数:

if(!function() {}.bind) {
Function.prototype.bind = function(context) {
if (arguments.length < 2 && context == void 0)
return this;
var _self = this,
args = [].slice.call(arguments, 1);
return function() {
_self.apply(context, args.concat.apply(args, arguments));
}
}
}

另外,我们可以利用bind修复IE事件绑定attachEvent回调中的this问题,它总是指向window对象,而标准浏览器的addEventListener中的this则为其调用对象。

function(el, type, fn) {
el.attachEvent('on' + type, fn.bind(el, event));
}

Function.prototype.bind、call与apply方法简介的更多相关文章

  1. 浅析 JavaScript 中的 Function.prototype.bind() 方法

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

  2. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  3. JavaScript 中的 Function.prototype.bind() 方法

    转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...

  4. Function.prototype.bind、call与apply

    学习Function.prototype.bind.call与apply时,看到一篇博客,学到一些内容,但由于博客时间太久,根据官方文档对内容进行一些修正:下文为修正过内容 前言 前段时间面试遇见一题 ...

  5. Function.prototype.bind 简介

    bind可以解决两种问题: 1. 可以改变一个函数的 this 指向 2. 可以实现偏函数等高阶功能 本文暂且讨论第一个功能 USE CASE var foo = { x: 3 } var bar = ...

  6. Function.prototype.bind

    解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...

  7. 解析Function.prototype.bind

    简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...

  8. Function.prototype.bind接口浅析

    本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...

  9. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

随机推荐

  1. (五)mysql表操作和约束条件

    (1)表基本操作 1)创建表 create table 表名(字段 数据类型 约束条件) mysql> create table student1(id int,name varchar(50) ...

  2. Python:文件操作技巧(File operation)(转)

    Python:文件操作技巧(File operation) 读写文件 # ! /usr/bin/python #  -*- coding: utf8 -*- spath = " D:/dow ...

  3. 洛谷 P1577 切绳子【二分答案】

    题目描述 有N条绳子,它们的长度分别为Li.如果从它们中切割出K条长度相同的 绳子,这K条绳子每条最长能有多长?答案保留到小数点后2位. 输入输出格式 输入格式: 第一行两个整数N和K,接下来N行,描 ...

  4. 并查集【p2700】逐个击破

    题目描述-->p2700 逐个击破 题意概括 花费最小的代价,使得一些有标记的节点不连通. 分析 我们需要花费最小代价使得原来连通的图中一些节点之间不相互连通. 贪心显然是可行的(一点也不显然 ...

  5. Proxmox VE

    Proxmox虚拟化环境是基于QEMU/KVM和LXC的开源服务器虚拟化管理解决方案.我们可以使用集成的易于使用的WEB界面或通过CLI管理虚拟机,容器,高可用集群,存储和网络. Proxmox VE ...

  6. 【主席树】bzoj3653 谈笑风生

    设siz[i]表示i的子树大小-1. 询问中b在a上方的便于统计. 对于b在a下方的情况,贡献为距a距离在K以内的节点的siz之和. 按dfs序建立可持久化线段树,线段树的下标是深度. 相当于把每个点 ...

  7. Java 输入框复用代码

    1 int messageType=JOptionPane.INFORMATION_MESSAGE; String message=mines + " minutes is approxim ...

  8. C# 二维码扫描

    Zint类用于产生二维码.https://sourceforge.net/projects/zint/ Zxing类用于读取二维码. https://github.com/zxing/zxing AF ...

  9. 安装完office2016 64位后,在安装visio时,报错,无法安装,

    安装环境要求: 系统要求:win8,win10等: office要求:sw(批量版)不能和cn(零售版).365版混装.-------重点注意事项 一定要注意批量版和零售版的区别,各版本之间绝对不允许 ...

  10. 精通JavaScript攻击框架:AttackAPI

    多年来客户端安全一直未引起人们的足够重视,但是如今情况发生了急剧转变,客户端安全已经成为信息安全领域的焦点之一.Web恶意软件.AJAX蠕虫.浏览历史暴破.登录检测.傀儡控制技术网络端口扫描以及浏览器 ...