必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

禁止转载,上面你知道'

2019-10-05 05:36 来源:未知

打赏协理本人写出越多好小说,多谢!

图片 1

1 赞 7 收藏 评论

  fNOP.prototype = this.prototype;

深切种类

JavaScript深刻体系目录地址:。

JavaScript深远连串预计写十五篇左右,意在帮大家捋顺JavaScript底层知识,入眼教学如原型、成效域、实施上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、承继等困难概念。

若是有错误或许不当心的地点,请必得给予指正,十二分感激。要是喜欢照旧有所启发,款待star,对小编也是一种鞭笞。

本系列:

  1. JavaScirpt 深切之从原型到原型链
  2. JavaScript 深刻之词法成效域和动态功能域
  3. JavaScript 深刻之奉行上下文栈
  4. JavaScript 深切之变量对象
  5. JavaScript 深切之成效域链
  6. JavaScript 深远之从 ECMAScript 规范解读 this
  7. JavaScript 深刻之实行上下文
  8. JavaScript 深刻之闭包
  9. JavaScript 深刻之参数按值传递
  10. JavaScript 深切之call和apply的模拟完成

    1 赞 收藏 评论

图片 2

javascript bind的用法

javascript的bind

bind重假诺为了转移函数内部的this指向,那么些是在ECMA5从此加入的,所以IE8一下的浏览器不帮忙

bind方法会成立叁个新函数,称为绑定函数.当调用那个绑定函数时,绑定函数会以创建它时传入bind方法的首先个参数作为this,传入bind方法的第贰个以及之后的参数加上绑定函数运转时自己的参数依照顺序作为原函数的参数来调用原函数.

能够看这段实例:
var logger = { x: 0, updateCount: function(){ this.x++; console.log(this.x); }} // 上面两段代码的贯彻是同等的 document.querySelector('button').add伊芙ntListener('click', function(){ logger.updateCount();}); //用这种格局让代码更加精简,当然这只是bind的一种现象document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));  

                var proxy = function () {

Read more

有关 bind 的介绍就到此地,下一篇小说将组成 underscore 来说讲怎么样兑现二个bind 的 polyfill。

  • Function.prototype.bind()
  • ECMAScript 5(ES5) 中 bind 方法简单介绍备忘
  • Javascript 中的 Bind ,Call 以及 Apply
  • Javascript 中 bind() 方法的应用与完成

打赏辅助自个儿写出更加多好小说,多谢!

打赏小编

}

构造函数效果的模仿完成

做到了这两点,最难的局地到啦!因为 bind 还会有一个特性,正是

一个绑定函数也能利用new操作符创造对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同不经常间调用时的参数被提需求模拟函数。

也便是说当 bind 重返的函数作为构造函数的时候,bind 时钦定的 this 值会失效,但传播的参数依旧奏效。比方:

var value = 2; var foo = { value: 1 }; function bar(name, age) { this.habit = 'shopping'; console.log(this.value); console.log(name); console.log(age); } bar.prototype.friend = 'kevin'; var bindFoo = bar.bind(foo, 'daisy'); var obj = new bindFoo('18'); // undefined // daisy // 18 console.log(obj.habit); console.log(obj.friend); // shopping // kevin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var value = 2;
 
var foo = {
    value: 1
};
 
function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}
 
bar.prototype.friend = 'kevin';
 
var bindFoo = bar.bind(foo, 'daisy');
 
var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

小心:就算在大局和 foo 中都表明了 value 值,最后照旧再次回到了 undefind,表达绑定的 this 失效了,假如大家理解 new 的模拟实现,就能够知晓那年的 this 已经针对了 obj。

(哈哈,笔者那是为自家的下一篇小说《JavaScript深远系列之new的模拟实现》打广告)。

故此我们得以经过退换重回的函数的原型来落到实处,让大家写一下:

// 第三版 Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1); var fbound = function () { var bindArgs = Array.prototype.slice.call(arguments); // 充作为构造函数时,this 指向实例,self 指向绑定函数,因为上面一句 `fbound.prototype = this.prototype;`,已经修改了 fbound.prototype 为 绑定函数的 prototype,此时结果为 true,当结果为 true 的时候,this 指向实例。 // 当作为普通函数时,this 指向 window,self 指向绑定函数,此时结果为 false,当结果为 false 的时候,this 指向绑定的 context。 self.apply(this instanceof self ? this : context, args.concat(bindArgs)); } // 修改重回函数的 prototype 为绑定函数的 prototype,实例就能够承继函数的原型中的值 fbound.prototype = this.prototype; return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 第三版
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fbound = function () {
 
        var bindArgs = Array.prototype.slice.call(arguments);
        // 当作为构造函数时,this 指向实例,self 指向绑定函数,因为下面一句 `fbound.prototype = this.prototype;`,已经修改了 fbound.prototype 为 绑定函数的 prototype,此时结果为 true,当结果为 true 的时候,this 指向实例。
        // 当作为普通函数时,this 指向 window,self 指向绑定函数,此时结果为 false,当结果为 false 的时候,this 指向绑定的 context。
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype,实例就可以继承函数的原型中的值
    fbound.prototype = this.prototype;
    return fbound;
}

一旦对原型链稍有纠葛,能够查看《JavaScript深远之从原型到原型链》。

javascript:对于Functionprototypebind()这些方法

Function.prototype.bind=function(thisArg){ var fn=this, slice=Array.prototype.slice, args=slice.call(arguments,1);//arguments1 var a1 = arguments; return function(){ alert(a1 == arguments);// 推断是不是为同一个 return fn.apply(thisArg,args.concat(slice.call(arguments)));//arguments2 }};((function(){}).bind())(2);// 总是alert出false不是。第多少个arguments是只thisArg,第三个则是指重返的老大函数的arguments。

Function.prototype.bind=function(thisArg){ var fn=this, slice=Array.prototype.slice, args=slice.call(arguments,1);//arguments1 alert(arguments[0]);// alert出1 return function(){ alert(arguments[0]);// alert出2 return fn.apply(thisArg,args.concat(slice.call(arguments)));//arguments2 }};((function(){}).bind(1))(2);  

!DOCTYPE htmlhtmlheadmeta charset="utf-8"stylebutton {background-color:#0f0;}/style/headbodybutton id="button" 按钮...

 

至于小编:韩子迟

图片 3

a JavaScript beginner 个人主页 · 笔者的稿子 · 9 ·    

图片 4

//在module内部定义x

再次来到函数的模拟达成

从第二个特色最早,大家举个例子:

var foo = { value: 1 }; function bar() { console.log(this.value); } // 重返了二个函数 var bindFoo = bar.bind(foo); bindFoo(); // 1

1
2
3
4
5
6
7
8
9
10
11
12
var foo = {
    value: 1
};
 
function bar() {
    console.log(this.value);
}
 
// 返回了一个函数
var bindFoo = bar.bind(foo);
 
bindFoo(); // 1

至于钦点 this 的对准,我们可以利用 call 也许 apply 完毕,关于 call 和 apply 的画虎不成反类犬完毕,能够查看《JavaScript深远之call和apply的模拟达成》。我们来写第一版的代码:

// 第一版 Function.prototype.bind2 = function (context) { var self = this; return function () { self.apply(context); } }

1
2
3
4
5
6
7
8
// 第一版
Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        self.apply(context);
    }
 
}

javascript中bind函数的效能实例介绍,javascriptbind

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按钮 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
};
//可以看出上下文的this 为button
</script>
</body>
</html>

这会儿加入bind

复制代码 代码如下:

 var text = document.getElementById("text");
 var button = document.getElementById("button");
 button.onclick = function() {
 alert(this.id); // 弹出button
 }.bind(text);
 //能够见到上下文的this 为button

那会儿会意识this改换为text

函数字面量里也适用,目标是涵养内外指向(this)不改变。

var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

那会儿点击开关text里的字会变色。可见this不为button而是obj。

bind()的艺术在ie,6,7,第88中学不适用,必要扩张通过扩充Function prototype能够兑现此格局。

if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

此时能够见见ie6,7,第88中学也支撑bind()。

复制代码 代码如下:

slice = Array.prototype.slice,

array = Array.prototype.slice.call( array, 0 );

将类似数组调换为数组

 

new

利用 bind 重临的结果仍旧个 function,是个 function 就足以被 new 运算符调用,那么结果吗?标准中说的很理解了,当使用 new 操作符调用绑定函数时,bind 的第贰个参数无效。

function Person(name, age) { this.name = name; this.age = age; } var _Person = Person.bind({}); var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind({});
var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

貌似大家不会去这么用,不过若是要写个 bind 的 polyfill(),依旧必要怀想用 new 调用的图景。

小编们也足以安装私下认可值(参考上一小节),原先提供的那几个参数依然会被置于到构造函数调用的眼下。

function Person(name, age) { this.name = name; this.age = age; } var _Person = Person.bind(null, 'hanzichi'); var p = new _Person(30); // Person {name: "hanzichi", age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind(null, 'hanzichi');
var p = new _Person(30); // Person {name: "hanzichi", age: 30}

//重回module,因为在module内部调用getX()

最终代码

由此最末尾的代码正是:

Function.prototype.bind2 = function (context) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fbound = function () { self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments))); } fNOP.prototype = this.prototype; fbound.prototype = new fNOP(); return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Function.prototype.bind2 = function (context) {
 
    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }
 
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
 
    var fbound = function () {
        self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
    }
 
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
 
    return fbound;
 
}

                            return fn.apply(target, args);

参数

bind 的率先个参数会作为原函数运维时的 this 指向,相当少说;而第三个初叶的参数是可选的,当绑定函数被调用时,这几个参数加上绑定函数本身的参数会奉公守法顺序作为原函数运维时的参数。怎么领会?

function fn(a, b, c) { return a + b + c; } var _fn = fn.bind(null, 10); var ans = _fn(20, 30); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a + b + c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

fn 函数供给多个参数,_fn 函数将 10 作为暗中同意的首先个参数,所以只必要传入多个参数就可以,就算你十分大心传入了多个参数,放心,也只会取前八个。

function fn(a, b, c) { return a + b + c; } var _fn = fn.bind(null, 10); var ans = _fn(20, 30, 40); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a + b + c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

那有甚用吗?假使某个函数,前多少个参数已经 “钦赐” 了,大家便得以用 bind 重返三个新的函数。也正是说,bind() 能使几个函数具备预设的开端参数。那个参数(即使部分话)作为 bind() 的第二个参数跟在 this 前边,之后它们会被插入到对象函数的参数列表的初叶地方,传递给绑定函数的参数会跟在它们的末尾。

function list() { return Array.prototype.slice.call(arguments); } var list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset leading argument var leadingThirtysevenList = list.bind(undefined, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

1
2
3
4
5
6
7
8
9
10
11
function list() {
  return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
 
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

    var self = this;

传参的模拟达成

接下去看第二点,能够流传参数。那个就有一些令人费解了,笔者在 bind 的时候,是不是能够传参呢?笔者在实行 bind 重返的函数的时候,可不得以传参呢?让大家看个例子:

var foo = { value: 1 }; function bar(name, age) { console.log(this.value); console.log(name); console.log(age); } var bindFoo = bar.bind(foo, 'daisy'); bindFoo('18'); // 1 // daisy // 18

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = {
    value: 1
};
 
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);
 
}
 
var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

函数须求传 name 和 age 多少个参数,竟然还足以在 bind 的时候,只传一个name,在实施回来的函数的时候,再传另三个参数 age!

那可咋做?不急,大家用 arguments 进行拍卖:

// 第二版 Function.prototype.bind2 = function (context) { var self = this; // 获取bind2函数从第2个参数到终极三个参数 var args = Array.prototype.slice.call(arguments, 1); return function () { // 那一年的arguments是指bind再次回到的函数字传送入的参数 var bindArgs = Array.prototype.slice.call(arguments); self.apply(context, args.concat(bindArgs)); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 第二版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);
 
    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(context, args.concat(bindArgs));
    }
 
}

                //做这样多,首要指标正是使您被代理的函数内部的arguments与function.prototype.bind里的arguments对象包蕴的事物一律

tip

bind 还是能做一些轶职业。

平常来讲,将七个类数组转为数组,大家会用 slice(ie9- 不援助)。参考

var slice = Array.prototype.slice; // slice.apply(arguments); // slice(arguments, 1);

1
2
3
4
var slice = Array.prototype.slice;
 
// slice.apply(arguments);
// slice(arguments, 1);

bind 能让调用变的进一步简约。

// same as "slice" in the previous example var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); // ... slice(arguments); // slice(arguments, 1);

1
2
3
4
5
6
7
8
// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
 
// ...
 
slice(arguments);
// slice(arguments, 1);

再举个类似的例子,比如说我们要增加事件到多少个节点,for 循环当然未有另外难点,我们还是能够 “剽窃” forEach 方法:

Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){ el.addEventListener('click', fn); });

1
2
3
Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){
  el.addEventListener('click', fn);
});

更进一竿,大家得以用 bind 将函数封装的越来越好:

var unboundForEach = Array.prototype.forEach , forEach = Function.prototype.call.bind(unboundForEach); forEach(document.querySelectorAll('input[type="button"]'), function (el) { el.addEventListener('click', fn); });

1
2
3
4
5
6
var unboundForEach = Array.prototype.forEach
  , forEach = Function.prototype.call.bind(unboundForEach);
 
forEach(document.querySelectorAll('input[type="button"]'), function (el) {
  el.addEventListener('click', fn);
});

一致看似的,我们得以将 x.y(z) 形成 y(x,z) 的样式:

var obj = { num: 10, getCount: function() { return this.num; } }; var unboundBind = Function.prototype.bind , bind = Function.prototype.call.bind(unboundBind); var getCount = bind(obj.getCount, obj); console.log(getCount()); // 10

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
  num: 10,
  getCount: function() {
    return this.num;
  }
};
 
var unboundBind = Function.prototype.bind
  , bind = Function.prototype.call.bind(unboundBind);
 
var getCount = bind(obj.getCount, obj);
console.log(getCount());  // 10

再举个栗子。每隔一秒在调整台打字与印刷 1-5,看起来是道调查闭包的经文标题。

for(var i = 1; i <= 5; i++) { !function(i) { setTimeout(function() { console.log(i); }, i * 1000); }(i); }

1
2
3
4
5
6
7
for(var i = 1; i <= 5; i++) {
  !function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

ES6 下能用 let

for(let i = 1; i <= 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); }

1
2
3
4
5
for(let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

也可以用 bind,须臾间逼格提高:

for(var i = 1; i <= 5; i++) { setTimeout(console.log.bind(console, i), i * 1000); }

1
2
3
for(var i = 1; i <= 5; i++) {
  setTimeout(console.log.bind(console, i), i * 1000);
}

var weiqi = new Person("卫旗");

构造函数效果的优化完成

唯独在这几个写法中,我们一贯将 fbound.prototype = this.prototype,大家直接修改 fbound.prototype 的时候,也会一直改造函数的 prototype。这年,大家能够通过叁个空函数来进展中转:

// 第四版 Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fbound = function () { var bindArgs = Array.prototype.slice.call(arguments); self.apply(this instanceof self ? this : context, args.concat(bindArgs)); } fNOP.prototype = this.prototype; fbound.prototype = new fNOP(); return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第四版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fNOP = function () {};
 
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
    return fbound;
 
}

到此截至,大的标题都已化解,给自己三个赞!o( ̄▽ ̄)d

 

bind 简介

Ok,今日要讲的难为 bind。关于 bind,能够先活动楼主在此以前写的小说 ECMAScript 5(ES5) 中 bind 方法简要介绍备忘,有个基本的概念。

bind() 方法会创制贰个新函数,当以此新函数被调用时,它的 this 值是传递给 bind() 的首先个参数, 它的参数是 bind() 的其他参数和其原来的参数。

语法是这么样子的:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

1
fun.bind(thisArg[, arg1[, arg2[, ...]]])
  • thisArg 当绑定函数被调用时,该参数会作为原函数运维时的 this 指向。当使用 new 操作符调用绑定函数时,该参数无效。
  • arg1, arg2, … (可选)当绑定函数被调用时,这几个参数加上绑定函数本身的参数会奉公守法顺序作为原函数运转时的参数。

  Function.prototype.bind分析

多个小题目

接下去管理些小意思:

1.apply 这段代码跟 MDN 上的稍有两样

在 MDN 普通话版讲 bind 的效仿达成时,apply 这里的代码是:

self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

1
self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

多了一个有关 context 是还是不是留存的判定,不过这几个是大错特错的!

举例:

var value = 2; var foo = { value: 1, bar: bar.bind(null) }; function bar() { console.log(this.value); } foo.bar() // 2

1
2
3
4
5
6
7
8
9
10
11
var value = 2;
var foo = {
    value: 1,
    bar: bar.bind(null)
};
 
function bar() {
    console.log(this.value);
}
 
foo.bar() // 2

如上代码平常状态下会打字与印刷 2,假使换到了 context || this,这段代码就能打印1!

进而这边不应当进行 context 的判别,我们查看 MDN 同样内容的英语版,就不设有那个推断!

2.调用 bind 的不是函数如何是好?

特别,大家要报错!

if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); }

1
2
3
if (typeof this !== "function") {
  throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}

3.作者要在线上用

那别忘了做个卓殊:

Function.prototype.bind = Function.prototype.bind || function () { …… };

1
2
3
Function.prototype.bind = Function.prototype.bind || function () {
    ……
};

当然最棒是用es5-shim啦。

     //->何况这里是把个体的参数放到前边的比如a=new Mouse();a.move(1,2);

配合 setTimeout

怎么时候便于错失 this 指向?恩,setTimeout 是八个场馆,很轻松把 this 指向 window,当然,setInterval 也是均等。当使用对象的艺术时,要求 this 援用对象,你大概供给显式地把 this 绑定到回调函数以便继续选拔对象。

var canvas = { render: function() { this.update(); this.draw(); }, update: function() { // ... }, draw: function() { // ... } }; window.setInterval(canvas.render, 1000 / 60);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var canvas = {
  render: function() {
    this.update();
    this.draw();
  },
 
  update: function() {
    // ...
  },
 
  draw: function() {
    // ...
  }
};
 
window.setInterval(canvas.render, 1000 / 60);

用 canvas 写特效也许做游戏时平常会遇见类似的标题。上边的代码是有题指标,render 方法中的 this 其实被针对了 window!大家得以用 bind,显式地把 this 绑定到回调函数以便继续选拔该对象。

window.setInterval(canvas.render.bind(canvas), 1000);

1
window.setInterval(canvas.render.bind(canvas), 1000);

好像的场合还会有 dom 的风云监听,一十分的大心也许 this 就被指向了 dom 成分。能够参谋下此前做 bigrender 时写的那有的代码 。

if (!Function.prototype.bind) {

bind

一句话介绍 bind:

bind() 方法会创制三个新函数。当以此新函数被调用时,bind() 的第2个参数将作为它运转时的 this,之后的一连串参数将会在传递的实参前流传作为它的参数。(来自于 MDN )

由此大家能够率先得出 bind 函数的两特个性:

  1. 回到二个函数
  2. 可以流传参数

里的this就不会针对Mouse的目的,相信大家通常遇上这种难题.只怕你早掌握了怎么消除,然而有越来越快更轻巧的章程呢?答案是:

有关 bind 你或然要求驾驭的知识点以及选拔境况

2016/08/18 · JavaScript · bind

本文作者: 伯乐在线 - 韩子迟 。未经笔者许可,禁止转发!
应接插足伯乐在线 专辑作者。

不看不精通,一看吓一跳,已经整整二个月没有创新 underscore 源码解读连串文章了。前边我们早已到位了 Object ,Array,Collection 上的强大方法的源码剖判,本文初阶来解读 Function 上的扩大方法。

总体的 underscore 源码解读种类小说请移步 ,以为还阔以的话,给个 star 慰勉下楼主呗 ^_^

Internet Explorer 9

JavaScript 浓厚之bind的模拟达成

2017/05/26 · JavaScript · bind

原稿出处: 冴羽   

                        }

      console.log("Hello,my name is "+self.name);

                            var args = Array.prototype.slice.call(arguments);

var name = "pig";

                            return fn.apply(target, args);

    fToBind = this,

        }

}

看样子大家对以上代码有一点点难知晓,来个简易点得

  getX:function(){

        -->这里的arguments与外场的不是同贰个,那一个是被代理的函数内部的arguments对象,

bind()方法会成立贰个新的函数,成为绑定函数。当调用那个绑定函数时,绑定函数会以创办它时传出的率先个参数作为this,传入bind()方法的第1个以及未来的参数加上绑定函数运维时本人的参数根据顺序作为原函数的参数来调取原函数。

            var proxy = function (fn, target) {

  return fBound;

                document.attachEvent("onmousemove", this.move.bind(this,1,2));

                aArgs.concat(Array.prototype.slice.call(arguments)));

  

那篇文章首要介绍了Javascript Function.prototype.bind详细深入分析的连带资料,须求的爱侣能够参见下

            console.log(arguments[0]);   //1

  throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");

            }

Chrome 7

 是否随后凡是碰到要抬高事件,然后调用的办法的this又想指向别的对象,那样是或不是很轻便呢..

};

        Mouse.prototype.log = function (arg1, arg2) {

weiqi.getName(); 

            this.position = position = [x, y];

      那样就化解了这一个标题,特别便于,因为它使得set提姆eout函数中可以访问Person的上下文。

        new Mouse();

var module = {

    };

      console.log("Hello,my name is "+this.name);

www.2cto.com

//重临window,因为那些getX()是在全局成效域中调用的

          };

    fNOP = function () {},

            }

  }

                    }

getX();

    function (target) {                   //这里的this指代要被代理的函数

    console.log(this.x);

        return proxy(this, target);

Safari 5.14

       比如这里的move函数的  arguments[0]=[object Event]就是以这一件事件之中的e参数

      实际行使中我们日常会遭遇那样的主题材料:

                      //从第一个初步抽取来,[this,绑定的对象,参数列表]

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:禁止转载,上面你知道'