Javascript--call/apply/bindメソッド

一、call/apply/bind
関数の実行を変更すると、thisがオブジェクトを指します.
call call()メソッドの最初のパラメータはthisがオブジェクトを指し、2番目のパラメータは関数実行時に入力するパラメータで、1つの入力しかできません.

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello()

Hello.call(obj, c)

//     
window {...}
a=1b=2c=undefined

{a: "   ", b: "   "}
a=   b=   c=3

通常、Hello関数はグローバルオブジェクトwindowにマウントされた関数であり、関数実行時にthisは呼び出されたオブジェクトwindowを指すべきであるが、call法によりobjオブジェクトが転送され、関数内のthisがobjオブジェクトになる
ブラウザ環境または非厳格モードでは、nullまたはundefinedが入力されると、thisはグローバルオブジェクトwindowを指し、nodeのような他の環境ではglobalを指す.

//        ，    var，   const，let，    undefined
//   var，    window        a b    
var a = 1
var b = 2
const c = 3

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello.call(null, c)

//     
window{...}
a=undefinedb=2c=3

厳格なモードであれば、thisは変わりません.何が入っているのか.

//     
'use strict'
var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello.call(null, c)

//     
null
  :Cannot read property 'a' of null at Hello

apply apllyメソッドは、関数の実行時にthisがオブジェクトを指すことを変更するために使用されます.メソッドには2つのパラメータがあります.最初のパラメータはthisが指すオブジェクトで、2番目のパラメータは関数の実行時に入力するパラメータで、配列でなければなりません.

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello(c)

Hello.apply(obj, [c])

//     
window {...}
a=1b=2c=3

{a: "   ", b: "   "}
a=   b=   c=3

callと同様に、通常、Hello関数はグローバルオブジェクトwindowにマウントされた関数であり、関数実行時にthisは呼び出されたオブジェクトwindowを指すべきであるが、apply法によりobjオブジェクトに転送され、関数内のthisがobjオブジェクトになる
ブラウザ環境または非厳格モードで、thisArgがnullまたはundefinedに送信されると、thisはグローバルオブジェクトwindowを指し、nodeのような他の環境であれば、thisはglobalを指す.

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}

Hello.apply(undefined, [c])

//     
window {...}
a=1b=2c=3

厳格なモードであれば、thisArgは変更されず、何が伝わってくるのか

'use strict'

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}

Hello.apply(undefined, [c])

//     
undefined
  :Cannot read property 'a' of undefined at Hello

bind bindもthisArgがオブジェクトを指すことを変更するために用いられ、第1のパラメータは関数実行時のthisArgがオブジェクトを指し、第2のオブジェクトは関数に伝わるパラメータであり、この方法はcallとあまり差がない.
Tips
Tips
Tips
1、bindは、callapplyのようにすぐに呼び出すのではなく、手動でトリガ関数を呼び出す必要がある関数を返します.
2、bindに入力されたパラメータは元の関数に入力されたパラメータに等しいのではなく、元の関数のパラメータの前に新しいパラメータとして追加され、元のパラメータが余分な場合はクリアされます.

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}
Hello()

Hello.bind(obj, c)(7, 8, 9)

//     
window {...}
a=1b=2c=undefinedd=undefinede=undefined
        
{a: "   ", b: "   "}
a=   b=   c=3d=7e=8 // 9  ，          ，bind    ，   9     

ブラウザ環境または非厳格モードで、thisArgがnullまたはundefinedに送信されると、thisはグローバルオブジェクトwindowを指し、nodeのような他の環境であれば、thisはglobalを指す.

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}

Hello.bind(undefined, c)(7, 8, 9)

//     
window {...}
a=1b=2c=3d=7e=8

厳格なモードであれば、thisArgは変更されず、何が伝わってくるのか

'use strict'

var a = 1
var b = 2
const c = 3

const obj = {
  a: '   ',
  b: '   ',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}

Hello.bind(undefined, c)(7, 8, 9)

//     
undefined
  :Cannot read property 'a' of undefined at Hello

転載先:https://www.cnblogs.com/zjh-study/p/10959792.html