博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript之bind
阅读量:4206 次
发布时间:2019-05-26

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

前几天看到一个面试题,题目是这样的:

请你说说对javascript中apply,call,bind的理解?

首先apply和call是老生常谈的东西,但是对于bind,我愣了下,因为这个词是jquery中使用频率很高的一个方法,用来给DOM元素绑定事件用的。

为了搞清这个陌生又熟悉的bind,google一下,发现javascript1.8.5版本中原生实现了此方法,目前IE9+,ff4+,chrome7+支持此方法,opera和safari不支持(MDN上的说明)。

bind的作用和apply,call类似都是改变函数的execute context,也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。

例子如下:

var person = {    name:'Andrew',    job:'web front end developer',    gender:'male',    sayHello:function() {        return 'Hi, I am ' +this.name + ', a ' +this.job;    }}     console.log(person.sayHello()); // Hi, I am Andrew, a web front end developer var anotherGuySayHello = person.sayHello.bind({    name:'Alex',    job:'back end C# developer'}); console.log(anotherGuySayHello());// Hi, I am Alex, a back end C# developer

另外带有参数的例子:

function add(arg1, arg2, arg3, arg4) {    return arg1 + ' ' + arg2 + ' ' + arg3 + ' ' + arg4;}var addMore = add.bind({}, 'a','b'); console.log(addMore('c','d')); // a b c d

如果你的浏览器暂时不支持此方法,但你又觉得这个很cool,想用,MDN上也给出参考实现, 这个实现很有意思,代码如下:

if(!Function.prototype.bind) {    Function.prototype.bind = function(oThis) {        if(typeof this !=='function') {            throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');        }                 var fSlice = Array.prototype.slice,            aArgs = fSlice.call(arguments, 1),            fToBind = this,            fNOP = function() {},            fBound = function() {                return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(fSlice.call(arguments)));            };                 fNOP.prototype = this.prototype;        fBound.prototype = new fNOP();             return fBound;    };}

最后几行代码,通过prototype chain的方式,其中fBound是调用bind函数的子类,为什么这么实现,可以仔细看 fBound = function(){ return ... }这一部分,其中this是运行时决定的,这里主要考虑到如果用new的方式来调用函数(构造函数方式)的情况。

下面的例子,就能很好的说明这点,为了方便说明,此例子直接来自MDN:

function Point(x,y) {    this.x = x;    this.y = y;} Point.prototype.toString = function() {    return this.x + ',' +this.y;}; var p = new Point(1, 2);p.toString(); // 1,2 var emptyObj = {};var YAxisPoint = Point.bind(emptyObj, 0); var axisPoint = new YAxisPoint(5);axisPoint.toString(); // 0, 5 axisPointinstanceof Point;    // trueaxisPointinstanceof YAxisPoint;  // true

最后给出文章链接,方便您进一步了解

MDN:
MSDN:

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

你可能感兴趣的文章
【一天一道LeetCode】#57. Insert Interval
查看>>
【一天一道LeetCode】#58. Length of Last Word
查看>>
【一天一道LeetCode】#59. Spiral Matrix II
查看>>
【一天一道LeetCode】#30. Substring with Concatenation of All Words
查看>>
【一天一道LeetCode】#60. Permutation Sequence.
查看>>
【一天一道LeetCode】#62. Unique Paths
查看>>
【一天一道LeetCode】#63. Unique Paths II
查看>>
【一天一道LeetCode】#36. Valid Sudoku
查看>>
【一天一道LeetCode】#75. Sort Colors
查看>>
【一天一道LeetCode】#76. Minimum Window Substring
查看>>
【计算机网络 第五版】阅读笔记之一:概述
查看>>
【计算机网络 第五版】阅读笔记之二:物理层
查看>>
【一天一道LeetCode】#91. Decode Ways
查看>>
【一天一道LeetCode】#92. Reverse Linked List II
查看>>
【一天一道LeetCode】#93. Restore IP Addresses
查看>>
【一天一道LeetCode】#94. Binary Tree Inorder Traversal
查看>>
【一天一道LeetCode】#113. Path Sum II
查看>>
【一天一道LeetCode】#114. Flatten Binary Tree to Linked List
查看>>
【unix网络编程第三版】阅读笔记(二):套接字编程简介
查看>>
【一天一道LeetCode】#115. Distinct Subsequences
查看>>