Viewing: zh.javascript.info

setTimeout this

this

this this

setTimeout this

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

this.firstName John undefined

setTimeout user.sayHi

          let f = user.sayHi;
setTimeout(f, 1000); //  user 
        

setTimeout this=window Node.jsthis timer this.firstName window.firstName this undefined

1

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(function() {
  user.sayHi(); // Hello, John!
}, 1000);

user

setTimeout(() => user.sayHi(), 1000); // Hello, John!

setTimeout user

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(() => user.sayHi(), 1000);

// user  1 
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

// Another user in setTimeout!

2bind

bind this

          // 
let boundFunc = func.bind(context);
        

func.bind(context) exotic objecttransparently func this=context

boundFunc this func

funcUser func this=user

let user = {
  firstName: "John"
};

function func() {
  alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

func.bind(user) func bound this=user

arguments func

let user = {
  firstName: "John"
};

function func(phrase) {
  alert(phrase + ', ' + this.firstName);
}

//  this  user
let funcUser = func.bind(user);

funcUser("Hello"); // Hello, John "Hello"  this=user

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

let sayHi = user.sayHi.bind(user); // (*)

// 
sayHi(); // Hello, John!

setTimeout(sayHi, 1000); // Hello, John!

//  user  1 
// sayHi pre-bound user 
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

(*) user.sayHi usersayHi bound setTimeout

arguments this bind

let user = {
  firstName: "John",
  say(phrase) {
    alert(`${phrase}, ${this.firstName}!`);
  }
};

let say = user.say.bind(user);

say("Hello"); // Hello, John! "Hello"  say
say("Bye"); // Bye, John! "Bye"  say

          for (let key in user) {
  if (typeof user[key] == 'function') {
    user[key] = user[key].bind(user);
  }
}
        

JavaScript lodash _.bindAll(object, methodNames)

Partial functions

this

thisarguments

bind

let bound = func.bind(context, [arg1], [arg2], ...);

this

mul(a, b)

          function mul(a, b) {
  return a * b;
}
        

bind double

function mul(a, b) {
  return a * b;
}

let double = mul.bind(null, 2);

alert( double(3) ); // = mul(2, 3) = 6
alert( double(4) ); // = mul(2, 4) = 8
alert( double(5) ); // = mul(2, 5) = 10

mul.bind(null, 2) double mul null 2 arguments

partial function application

this bind null

triple

function mul(a, b) {
  return a * b;
}

let triple = mul.bind(null, 3);

alert( triple(3) ); // = mul(3, 3) = 9
alert( triple(4) ); // = mul(3, 4) = 12
alert( triple(5) ); // = mul(3, 5) = 15

doubletriple

send(from, to, text) user send user sendTo(to, text)

partial

arguments this

bind arguments

arguments partial

function partial(func, ...argsBound) {
  return function(...args) { // (*)
    return func.call(this, ...argsBound, ...args);
  }
}

// 
let user = {
  firstName: "John",
  say(time, phrase) {
    alert(`[${time}] ${this.firstName}: ${phrase}!`);
  }
};

//  partial 
user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());

user.sayNow("Hello");
// 
// [10:00] John: Hello!

partial(func[, arg1, arg2...]) (*) func

this user.sayNow user
...argsBound partial "10:00"
...args "Hello"

spread

lodash _.partial

func.bind(context, ...args) func bound this ...args

bind this setTimeout

partially applied partial

send(from, to) from

          function f() {
  alert( this ); // ?
}

let user = {
  g: f.bind(null)
};

user.g();
        

null

function f() {
  alert( this ); // null
}

let user = {
  g: f.bind(null)
};

user.g();

hard-fixed

user.g() this=null

bind

this

          function f() {
  alert(this.name);
}

f = f.bind( {name: "John"} ).bind( {name: "Ann" } );

f();
        

John

function f() {
  alert(this.name);
}

f = f.bind( {name: "John"} ).bind( {name: "Pete"} );

f(); // John

f.bind(...) exotic

re-bound

bind

bind

function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "John"
});

alert( bound.test ); //

undefined

bind test

"this"

askPassword() password user.loginOk/loginFail

function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logged in`);
  },

  loginFail() {
    alert(`${this.name} failed to log in`);
  },

};

askPassword(user.loginOk, user.loginFail);

ask loginOk/loginFail

ask this=undefined

bind

function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`${this.name} logged in`);
  },

  loginFail() {
    alert(`${this.name} failed to log in`);
  },

};

askPassword(user.loginOk.bind(user), user.loginFail.bind(user));

          //...
askPassword(() => user.loginOk(), () => user.loginFail());
        

user askPassword () => user.loginOk()

"this"

user loginOk/loginFail user.login(true/false)

askPassword user.login(true) okuser.login(false) fail

          function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  login(result) {
    alert( this.name + (result ? ' logged in' : ' failed to log in') );
  }
};

askPassword(?, ?); // ?
        

wapper

askPassword(() => user.login(true), () => user.login(false));

user

user.login user

askPassword(user.login.bind(user, true), user.login.bind(user, false));