set Timeoutのthisは、学習appy、call、bindを指します.
27764 ワード
"UTF-8">
<script class="hljs-built_in">type</span>=<span class="hljs-string">"text/javascript"</span>>
var name = <span class="hljs-string">" "</span>;
<span class="hljs-keyword">function</span> Coder(name) {
this.name = name;
<span class="hljs-keyword">function</span> <span class="hljs-function"><span class="hljs-title">alerts</span></span>() {
console.log(<span class="hljs-string">'alert:'</span> + this.name);
}
this.getName = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'this.getName'</span>+this.name)
};
this.delayGetName = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'--:'</span> + this.name)
}, 1000);
};
this.delayGetName0 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(() => {
console.log(<span class="hljs-string">'0:'</span> + this.name);
}, 1000);
};
this.delayGetName1 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
var that = this;
<span class="hljs-built_in">set</span>Timeout(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'1:'</span> + that.name);
}, 1000);
};
this.delayGetName2 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'2:'</span> + this.name);
}.bind(this), 1000);
};
this.delayGetName3 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'3:'</span> + this.name);
}.call(this), 1000);
};
this.delayGetName4 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">'4:'</span> + this.name);
}.apply(this), 1000);
};
this.delayGetName5 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(alerts.bind(this), 1000);
};
this.delayGetName6 = <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">set</span>Timeout(this.getName.bind(this), 1000);
};
}
var me = new Coder(<span class="hljs-string">' '</span>);
me.delayGetName();
me.delayGetName0();
me.delayGetName1();
me.delayGetName2();
me.delayGetName3();
me.delayGetName4();
me.delayGetName5();
me.delayGetName6();
</script>
<span class="copy-code-btn"></span></code></pre>
<p><br/></p>
<h1>call,apply ：bind ，bind ， ；apply 、call 。</h1>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<h2>apply、call、bind</h2>
<p><code>apply call </code></p>
<p><br/> ， ， ， ， apply、call、bind ， 。</p>
<p>apply、call</p>
<p> javascript ，call apply <code> （context）</code> ， ， <code> this </code>。</p>
<p> ：</p>
<pre><code><span class="hljs-keyword">function</span> <span class="hljs-function"><span class="hljs-title">fruits</span></span>() {}
fruits.prototype = {
color: <span class="hljs-string">"red"</span>,
say: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
console.log(<span class="hljs-string">"My color is "</span> + this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red<span class="copy-code-btn"></span></code></pre>
<p> banana= {color : "yellow"} , <code> banana= {color : "yellow"} , say ， call apply apple say ：</code>， call apply apple say ：</p>
<pre><code>banana = {
color: <span class="hljs-string">"yellow"</span>
}
apple.say.call(banana); //My color is yellow
apple.say.apply(banana); //My color is yellow<span class="copy-code-btn"></span></code></pre>
<p> ， call apply this ， object <code>（ banana say ）</code>， （ apple say ）， call apply 。</p>
<p> ( )：</p>
<ul>
<li>fruits() color call color this </li>
<li>banana say() fruits() say() </li>
</ul>
<p>apply、call </p>
<p> apply、call ， ， 。 ， ：</p>
<pre><code>var func = <span class="hljs-keyword">function</span>(arg1, arg2) {
};<span class="copy-code-btn"></span></code></pre>
<p> ：</p>
<pre><code>func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])<span class="copy-code-btn"></span></code></pre>
<p><code>call(this) apply(this) func() </code></p>
<p> this ， JavaScript (JavaScript )，<code>call </code>， <code>apply </code>。 </p>
<p>JavaScript ， ， ， <code>call</code> 。<br/> apply， push 。 ， arguments 。</p>
<p> ， ：</p>
<p>1、 </p>
<pre><code>var array1 = [12 , <span class="hljs-string">"foo"</span> , {name <span class="hljs-string">"Joe"</span>} , -2458];
var array2 = [<span class="hljs-string">"Doe"</span> , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 [12 , <span class="hljs-string">"foo"</span> , {name <span class="hljs-string">"Joe"</span>} , -2458 , <span class="hljs-string">"Doe"</span> , 555 , 100] */<span class="copy-code-btn"></span></code></pre>
<p><code> array1 Array push </code></p>
<p>2、 </p>
<pre><code>var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458<span class="copy-code-btn"></span></code></pre>
<p><code> numbers Math max </code><br/>number max ， Math ， call apply 。</p>
<p>3、 （ toString() ）</p>
<pre><code>functionisArray(obj){
<span class="hljs-built_in">return</span>Object.prototype.toString.call(obj) === <span class="hljs-string">'[object Array]'</span> ;
}<span class="copy-code-btn"></span></code></pre>
<p>4、 （ ） => </p>
<pre><code>var domNodes = Array.prototype.slice.call(document.getElementsByTagName(<span class="hljs-string">"*"</span>));<span class="copy-code-btn"></span></code></pre>
<p>Javascript <code> </code>。 <code>arguments </code>， <code>getElementsByTagName</code>, <code>document.childNodes</code> ， <code>NodeList </code>。 Array push , pop 。</p>
<p> apply、call</p>
<p> ， apply call 。<br/> log ， console.log ， ：</p>
<pre><code><span class="hljs-keyword">function</span> <span class="hljs-built_in">log</span>(msg) {
console.log(msg);
}
<span class="hljs-built_in">log</span>(1); //1
<span class="hljs-built_in">log</span>(1,2); //1<span class="copy-code-btn"></span></code></pre>
<p> ， <code> </code> ， ， apply call， <code> </code>， <code>apply</code> ， :</p>
<pre><code><span class="hljs-keyword">function</span> <span class="hljs-function"><span class="hljs-title">log</span></span>(){
console.log.apply(console, arguments);
};
<span class="hljs-built_in">log</span>(1); //1
<span class="hljs-built_in">log</span>(1,2); //1 2<span class="copy-code-btn"></span></code></pre>
<p> log "(app)" ， ：</p>
<pre><code><span class="hljs-built_in">log</span>(<span class="hljs-string">"hello world"</span>); //(app)hello world<span class="copy-code-btn"></span></code></pre>
<p> ? arguments ， Array.prototype.slice.call ， unshift， ：</p>
<pre><code><span class="hljs-keyword">function</span> <span class="hljs-function"><span class="hljs-title">log</span></span>(){
// =>
var args = Array.prototype.slice.call(arguments);
args.unshift(<span class="hljs-string">'(app)'</span>);
console.log.apply(console, args);
};<span class="copy-code-btn"></span></code></pre>
<p>bind</p>
<p> apply call ， bind。bind() apply call ， <code> this </code>。<br/>MDN ：bind() ， <code> </code>， ， bind() this， bind() 。</p>
<pre><code>var foo = {
bar : 1,
eventBind: <span class="hljs-function"><span class="hljs-title">function</span></span>(){
var _this = this;
$(<span class="hljs-string">'.someClass'</span>).on(<span class="hljs-string">'click'</span>,<span class="hljs-keyword">function</span>(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}<span class="copy-code-btn"></span></code></pre>
<p> Javascript ， eventBind:function(){ } $('.someClass').on('click',function(event) { }) ， this ， 。 bind() ：</p>
<pre><code>var foo = {
bar : 1,
eventBind: <span class="hljs-function"><span class="hljs-title">function</span></span>(){
$(<span class="hljs-string">'.someClass'</span>).on(<span class="hljs-string">'click'</span>,<span class="hljs-keyword">function</span>(event) {
/* Act on the event */
console.log(_this.bar); //1
}.bind(this));
}
}<span class="copy-code-btn"></span></code></pre>
<p> ，bind() ， click ， this （ bind() ）。 ， this( foo )， bind() 。 ， ， this foo 。 ：</p>
<pre><code>var bar = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log(this.x);
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3<span class="copy-code-btn"></span></code></pre>
<p><code> foo.bar bar() </code></p>
<p> func， bind() ， ， this foo ， bar() 。</p>
<pre><code>var bar = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?<span class="copy-code-btn"></span></code></pre>
<p> ， 3 ， 4 5 。 ， Javascript ，<code> bind() </code>。 ， bind() ， call / apply ， bind() bind() ,<code> bind </code>。</p>
<p>apply、call、bind </p>
<p> apply、call、bind ， ？ apply、call， bind 。 ：</p>
<pre><code>var obj = {
x: 81,
};
var foo = {
getX: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">return</span> this.x;
}
}
console.log( foo.getX.bind(obj)() ); //81
console.log( foo.getX.call(obj) ); //81
console.log( foo.getX.apply(obj) ); //81<span class="copy-code-btn"></span></code></pre>
<ul>
<li>bind() bind()() `</li>
<li>call() apply() `</li>
</ul>
<p> 81， bind() ，<code> </code>。</p>
<p> ， ， ， ， bind() 。 apply/call 。</p>
<blockquote>
<p> ：</p>
</blockquote>
<ul>
<li>apply 、 call 、bind this ；</li>
<li>apply 、 call 、bind this ， ；</li>
<li>apply 、 call 、bind ；</li>
<li>bind ， ；apply、call 。</li>
</ul>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<h1>apply、call </h1>
<p> ， ， apply call 。 ， ！ ， ， O(∩_∩)O~</p>
<p>ECAMScript 3 Function , Function.prototype.call Function.prototype.apply。</p>
<p> .call apply </p>
<p>1、Function.prototype.call Function.prototype.apply 。 , 。</p>
<p>apply , this ,</p>
<p> , , ,apply </p>
<pre><code> var func = <span class="hljs-keyword">function</span>( a, b, c ){
console.log([a,b,c]); // :[1,2,3]
};
func.apply( null, [ 1, 2, 3 ] );<span class="copy-code-btn"></span></code></pre>
<p>call , apply , this , , </p>
<pre><code> var func = <span class="hljs-keyword">function</span>( a, b, c ){
console.log([a,b,c]); // :[1,2,3]
};
func.call( null, 1, 2, 3 );<span class="copy-code-btn"></span></code></pre>
<p>2、 call apply , null, this , window</p>
<pre><code> var func = <span class="hljs-keyword">function</span>( a, b, c ){
console.log(this === window); // :<span class="hljs-literal">true</span>
};
func.apply( null, [ 1, 2, 3 ] );<span class="copy-code-btn"></span></code></pre>
<p> , this null</p>
<pre><code> <span class="hljs-string">"use strict"</span>;
console.log(this === null); // :<span class="hljs-literal">true</span>
};
func.apply( null, [ 1, 2, 3 ] );<span class="copy-code-btn"></span></code></pre>
<p>3、 call apply this , , 。 null </p>
<pre><code>var a=Math.max.apply( null, [ 1, 2, 5, 3, 4 ] );
console.log(a);// :5
<span class="copy-code-btn"></span></code></pre>
<p> .call apply </p>
<p>1. this </p>
<p> </p>
<pre><code> var obj1={
name: <span class="hljs-string">'sven'</span>
};
var obj2={
name: <span class="hljs-string">'anne'</span>
};
window.name = <span class="hljs-string">'window'</span>;
var getName = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log ( this.name );
};
getName(); // : window
getName.call( obj1 );// : sven
getName.call(obj2 ); // : anne<span class="copy-code-btn"></span></code></pre>
<p> </p>
<pre><code> <strong>getName.call( obj1 );</strong><span class="copy-code-btn"></span></code></pre>
<p> ， </p>
<pre><code> <strong>var getName = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log ( obj1.name );// : sven
}; </strong><span class="copy-code-btn"></span></code></pre>
<p> </p>
<pre><code>document.getElementById( <span class="hljs-string">'div1'</span> ).onclick = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log( this.id );// : div1
var func = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log ( this.id );// : undefined
}
func();
};
//
document.getElementById( <span class="hljs-string">'div1'</span> ).onclick = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
var func = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log ( this.id );// : div1
}
func.call(this);
};
<span class="copy-code-btn"></span></code></pre>
<p>2. Function.prototype.bind</p>
<pre><code> Function.prototype.bind = <span class="hljs-keyword">function</span>( context ){
var self = this; //
<span class="hljs-built_in">return</span> <span class="hljs-function"><span class="hljs-title">function</span></span>(){ //
<span class="hljs-built_in">return</span> self.apply( context, arguments );// ， context this
}
};
var obj={
name: <span class="hljs-string">'sven'</span>
};
var func = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log ( this.name );// : sven
}.bind( obj);
func();
//
Function.prototype.bind = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
var self = this, //
context = [].shift.call( arguments ),// this
args = [].slice.call( arguments ); //
<span class="hljs-built_in">return</span> <span class="hljs-function"><span class="hljs-title">function</span></span>(){ //
<span class="hljs-built_in">return</span> self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) );
// ， context this
// ，
}
};
var obj={
name: <span class="hljs-string">'sven'</span>
};
var func = <span class="hljs-keyword">function</span>( a, b, c, d ){
console.log ( this.name ); // : sven
console.log([a,b,c,d]) // : [1,2,3,4]
}.bind( obj, 1, 2 );
func( 3, 4 );<span class="copy-code-btn"></span></code></pre>
<p>3. </p>
<p> “ ”, , </p>
<pre><code> var A = <span class="hljs-keyword">function</span>( name ){
this.name = name;
};
var B = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
A.apply(this,arguments);
};
B.prototype.getName = <span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> this.name;
};
var b=new B(<span class="hljs-string">'sven'</span>);
console.log( b.getName() ); // : <span class="hljs-string">'sven'</span><span class="copy-code-btn"></span></code></pre>
<p> —— arguments , “ ”, , , 。</p>
<p> , Array.prototype 。</p>
<p> arguments , Array.prototype.push；</p>
<p> arguments , Array.prototype.slice ；</p>
<p> arguments , Array.prototype.shift 。</p>
<pre><code> var a={};
Array.prototype.push.call( a, <span class="hljs-string">'first'</span> );
console.log ( a.length ); // : 1
console.log(a[0]); // : first
// , , IE , a length
var a={
length: 0
}; <span class="copy-code-btn"></span></code></pre>
<p> Array.prototype.push <br/>1、 <br/>2、 length 。</p>
<p>360 ：yunpan.cn/ckcdvDALGAk… （ ：d76d）</p>
<p> . es6 （=>） ，call apply “ ”</p>
<p> 。</p>
<p>（1） this ， ， 。</p>
<p>（2） ， ， new ， 。</p>
<p>（3） arguments ， 。 ， Rest 。</p>
<p>（4） yield ， Generator 。</p>
<p> ， 。this ， ， 。</p>
<pre><code> <span class="hljs-keyword">function</span> <span class="hljs-function"><span class="hljs-title">foo</span></span>() {
<span class="hljs-built_in">return</span> () => {
<span class="hljs-built_in">return</span> () => {
<span class="hljs-built_in">return</span> () => {
console.log(<span class="hljs-string">'id:'</span>, this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1<span class="copy-code-btn"></span></code></pre>
<p> ， this， foo this， t1、t2、t3 。 ， this， this foo this。</p>
<p> this， call()、apply()、bind() this 。</p>
<p><br/></p>
</div>
</div>
</div>
</div>
</div>