Hướng dẫn what is a bind in javascript? - một ràng buộc trong javascript là gì?

Question

Chức năng mượn

Với phương thức

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4, một đối tượng có thể mượn một phương thức từ một đối tượng khác.

Nội dung chính Show

Chức năng mượn
Bảo tồn điều nàythis
Bảo tồn điều nàythis?
Thông số
Giá trị trả về
Sự mô tả
Tạo hàm ràng buộc
Các chức năng áp dụng một phần
Với setTimeout ()
Các chức năng ràng buộc được sử dụng làm hàm tạo
Các lớp ràng buộc
Chuyển đổi phương pháp thành các chức năng tiện ích
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Tại sao chúng ta cần ràng buộc trong JS?
Bind và Call trong JavaScript là gì?
Điểm ràng buộc là gì?
Việc sử dụng liên kết trong React JS là gì?

Ví dụ dưới đây tạo ra 2 đối tượng (người và thành viên).

Đối tượng thành viên mượn phương thức fullName từ đối tượng người:

Thí dụ

const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",}
firstName:"Hege",
lastName: "Nilsen",
}

Đặt fullName = person.fullname.bind (thành viên);

Hãy tự mình thử »

Bảo tồn điều nàythis

Đôi khi phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 phải được sử dụng để ngăn chặn việc mất điều này.this.

Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người:this refers to the person object:

Thí dụ

const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",}

Hãy tự mình thử »

Bảo tồn điều nàythis is lost.

Đôi khi phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 phải được sử dụng để ngăn chặn việc mất điều này.undefined instead:

Thí dụ

const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",}

Hãy tự mình thử »

Bảo tồn điều này

Đôi khi phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 phải được sử dụng để ngăn chặn việc mất điều này.

Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người:

Thí dụ

const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",}
setTimeout(display, 3000);

Hãy tự mình thử »

Bảo tồn điều nàythis?

Đôi khi phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 phải được sử dụng để ngăn chặn việc mất điều này.object.

Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người: object depends on how

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 is being invoked (used or called).

const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; Hiển thị: function () {& nbsp; & nbsp; & nbsp; Đặt x = document.getEuityById ("demo"); & nbsp; & nbsp; & nbsp; x.innerhtml = this.firstname + "" + this.lastName; & nbsp; & nbsp;}}

person.display ();object.

Khi một hàm được sử dụng như một cuộc gọi lại, điều này bị mất.global object.

Ví dụ này sẽ cố gắng hiển thị tên người sau 3 giây, nhưng nó sẽ hiển thị không xác định thay thế:global object.

setTimeout (person.display, 3000);

Phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 giải quyết vấn đề này.element that received the event.

Trong ví dụ sau, phương pháp

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 được sử dụng để liên kết Person.display với người.any object.

Phương thức

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 tạo ra một hàm mới, khi được gọi, có từ khóa

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được đặt thành giá trị được cung cấp, với một chuỗi các đối số nhất định trước bất kỳ được cung cấp nào khi hàm mới được gọi.
function log(...args) { "use strict"; // prevent `this` from being boxed into the wrapper object console.log(this, ...args); }; const boundLog = log.bind("this value", 1, 2); const boundLog2 = boundLog.bind("new this value", 3, 4); boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6
4 method creates a new function that, when called, has its

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Thử nó

Cú pháp

bind(thisArg)
bind(thisArg, arg1)
bind(thisArg, arg1, arg2)
bind(thisArg, arg1, arg2, /* …, */ argN)

Thông số

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

3

Giá trị được truyền dưới dạng tham số

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 cho hàm đích

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

5 khi hàm giới hạn được gọi. Nếu hàm không ở chế độ nghiêm ngặt,

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

6 và

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

5 sẽ được thay thế bằng đối tượng toàn cầu và các giá trị nguyên thủy sẽ được chuyển đổi thành các đối tượng. Giá trị bị bỏ qua nếu hàm giới hạn được xây dựng bằng toán tử

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8.

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

9 Tùy chọnOptional

Các đối số để mong đợi các đối số được cung cấp cho chức năng ràng buộc khi gọi

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

5.

Giá trị trả về

Một bản sao của hàm đã cho với giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được chỉ định và các đối số ban đầu (nếu được cung cấp).

Sự mô tả

Hàm

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 tạo ra một hàm ràng buộc mới. Gọi hàm ràng buộc thường dẫn đến việc thực thi chức năng mà nó kết thúc, còn được gọi là hàm đích. Hàm ràng buộc sẽ lưu trữ các tham số được truyền - bao gồm giá trị của

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 và một vài đối số đầu tiên - là trạng thái bên trong của nó. Các giá trị này được lưu trữ trước, thay vì được thông qua tại thời điểm gọi. Nói chung, bạn có thể thấy

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

4 tương đương với

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

5 cho hiệu ứng khi nó được gọi (nhưng không phải khi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

6 được xây dựng).

Một hàm ràng buộc có thể bị ràng buộc hơn nữa bằng cách gọi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

7, tạo ra một hàm ràng buộc khác

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

8. Giá trị ____33 mới bị ràng buộc bị bỏ qua, bởi vì hàm mục tiêu của

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

8, đó là

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

6, đã có ràng buộc

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8. Khi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

8 được gọi, nó sẽ gọi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

6, từ đó gọi

this.x = 9; // 'this' refers to the global object (e.g. 'window') in non-strict mode
const module = {
  x: 81,
  getX() {
    return this.x;
  },
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);
boundGetX();
//  returns 81

5. Các đối số mà

this.x = 9; // 'this' refers to the global object (e.g. 'window') in non-strict mode
const module = {
  x: 81,
  getX() {
    return this.x;
  },
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);
boundGetX();
//  returns 81

5 cuối cùng nhận được, theo thứ tự: các đối số bị ràng buộc bởi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

6, các đối số bị ràng buộc bởi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

8 và các đối số nhận được bởi

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

8.

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

Một hàm ràng buộc cũng có thể được xây dựng bằng toán tử

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8 nếu hàm đích của nó có thể xây dựng được. Làm như vậy hoạt động như thể chức năng đích thay vào đó đã được xây dựng. Các đối số được chuẩn bị được cung cấp cho chức năng đích như bình thường, trong khi giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được cung cấp bị bỏ qua (vì việc xây dựng chuẩn bị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 của chính nó, như được thấy bởi các tham số của

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

3). Nếu hàm giới hạn được xây dựng trực tiếp,

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

4 sẽ là hàm đích thay thế. (Nghĩa là, hàm ràng buộc trong suốt đến

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

4.)

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

Tuy nhiên, vì một hàm ràng buộc không có thuộc tính

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

6, nó không thể được sử dụng làm lớp cơ sở cho

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

7.

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

Khi sử dụng chức năng ràng buộc làm phía bên phải của

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

8,

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

8 sẽ đạt được chức năng đích (được lưu trữ bên trong trong hàm ràng buộc) và thay vào đó đọc

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

6 của nó.

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

Hàm giới hạn có các thuộc tính sau:

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

1

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

1 của hàm đích trừ đi số lượng đối số bị ràng buộc (không tính tham số

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

3), với 0 là giá trị tối thiểu.

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

4

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

4 của hàm đích cộng với tiền tố

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

6.

Hàm giới hạn cũng kế thừa chuỗi nguyên mẫu của hàm đích. Tuy nhiên, nó không có các thuộc tính riêng khác của hàm đích (chẳng hạn như các thuộc tính tĩnh nếu hàm đích là một lớp).

Ví dụ

Tạo hàm ràng buộc

Việc sử dụng đơn giản nhất của

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 là tạo ra một hàm, bất kể nó được gọi như thế nào, được gọi với một giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 cụ thể.

Một sai lầm phổ biến đối với các lập trình viên JavaScript mới là trích xuất một phương thức từ một đối tượng, sau đó gọi chức năng đó và hy vọng nó sẽ sử dụng đối tượng gốc làm

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 (ví dụ: bằng cách sử dụng phương thức trong mã dựa trên gọi lại).

Tuy nhiên, không có sự quan tâm đặc biệt, đối tượng ban đầu thường bị mất. Tạo hàm ràng buộc từ hàm, sử dụng đối tượng gốc, giải quyết gọn gàng vấn đề này:

this.x = 9; // 'this' refers to the global object (e.g. 'window') in non-strict mode
const module = {
  x: 81,
  getX() {
    return this.x;
  },
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);
boundGetX();
//  returns 81

Lưu ý: Nếu bạn chạy ví dụ này ở chế độ nghiêm ngặt (ví dụ: trong các mô -đun ECMAScript hoặc thông qua Chỉ thị

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

0), giá trị toàn cầu
function log(...args) { "use strict"; // prevent `this` from being boxed into the wrapper object console.log(this, ...args); }; const boundLog = log.bind("this value", 1, 2); const boundLog2 = boundLog.bind("new this value", 3, 4); boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6
8 sẽ không được xác định, khiến cuộc gọi
class LateBloomer { bloom() { // Declare bloom after a delay of 1 second setTimeout(() => this.declare(), 1000); } }
2 không thành công. If you run this example in strict mode (e.g. in ECMAScript modules, or through the

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

0 directive), the global

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 value will be undefined, causing the

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

2 call to fail.

Nếu bạn chạy điều này trong mô-đun Node CommonJS, phạm vi hàng đầu

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 sẽ chỉ vào

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

4 thay vì

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

5, bất kể ở chế độ nghiêm ngặt hay không. Tuy nhiên, trong các chức năng, tham chiếu của

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 không liên kết vẫn tuân theo quy tắc "

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

5 trong không nghiêm ngặt,

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

5 trong nghiêm ngặt". Do đó, ở chế độ không nghiêm ngặt (mặc định),

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

2 sẽ trả về

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

5 vì

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// The thisArg's value doesn't matter because it's ignored
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

1 đang viết cho một đối tượng khác (

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

4) từ những gì

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// The thisArg's value doesn't matter because it's ignored
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

3 đang đọc từ (

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

5).

Trên thực tế, một số "Phương thức" tích hợp cũng là những getters trả về các hàm ràng buộc-một ví dụ đáng chú ý là

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// The thisArg's value doesn't matter because it's ignored
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

5, khi được truy cập, trả về một hàm ràng buộc mà bạn có thể trực tiếp vượt qua như một cuộc gọi lại.

Các chức năng áp dụng một phần

Việc sử dụng đơn giản nhất tiếp theo của

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 là tạo một chức năng với các đối số ban đầu được chỉ định trước.

Các đối số này (nếu có) tuân theo giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được cung cấp và sau đó được chèn khi bắt đầu các đối số được chuyển đến hàm đích, theo sau là bất kỳ đối số nào được chuyển đến hàm ràng buộc tại thời điểm nó được gọi.

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

Với setTimeout ()

Theo mặc định, trong

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// The thisArg's value doesn't matter because it's ignored
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

8, từ khóa

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 sẽ được đặt thành

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

5, đó là

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

01 trong các trình duyệt. Khi làm việc với các phương thức lớp yêu cầu

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 tham khảo các trường hợp lớp, bạn có thể liên kết rõ ràng

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 với chức năng gọi lại, để duy trì thể hiện.

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

Bạn cũng có thể sử dụng các chức năng mũi tên cho mục đích này.

class LateBloomer {
  bloom() {
    // Declare bloom after a delay of 1 second
    setTimeout(() => this.declare(), 1000);
  }
}

Các chức năng ràng buộc được sử dụng làm hàm tạo

Các chức năng ràng buộc được tự động phù hợp để sử dụng với toán tử

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8 để xây dựng các phiên bản mới được tạo bởi hàm đích. Khi một hàm ràng buộc được sử dụng để xây dựng một giá trị,

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được cung cấp bị bỏ qua. Tuy nhiên, các đối số được cung cấp vẫn được chuẩn bị cho cuộc gọi xây dựng.

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// The thisArg's value doesn't matter because it's ignored
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

Lưu ý rằng bạn không cần phải làm bất cứ điều gì đặc biệt để tạo chức năng ràng buộc để sử dụng với

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8.

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

4,

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

8,

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8, v.v ... Tất cả đều hoạt động như mong đợi, như thể hàm tạo không bao giờ bị ràng buộc. Sự khác biệt duy nhất là nó không còn có thể được sử dụng cho

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtySevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtySevenList();
//  [37]

const list3 = leadingThirtySevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

7.

Hệ quả là bạn không cần phải làm bất cứ điều gì đặc biệt để tạo chức năng ràng buộc để được gọi là rõ ràng, ngay cả khi bạn muốn yêu cầu chức năng ràng buộc chỉ được gọi bằng cách sử dụng

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8. Nếu bạn gọi nó mà không có

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8, ràng buộc

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 đột nhiên không bị bỏ qua.

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

0

Nếu bạn muốn hạn chế chức năng ràng buộc chỉ được gọi bằng

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8 hoặc chỉ được gọi mà không có

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

8, chức năng đích phải thực thi hạn chế đó, chẳng hạn như bằng cách kiểm tra

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

16 hoặc sử dụng lớp.

Các lớp ràng buộc

Sử dụng

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 trên các lớp bảo tồn hầu hết các ngữ nghĩa của lớp, ngoại trừ tất cả các thuộc tính riêng của lớp hiện tại đều bị mất. Tuy nhiên, vì chuỗi nguyên mẫu được bảo tồn, bạn vẫn có thể truy cập các thuộc tính tĩnh được kế thừa từ lớp cha.

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

1

Chuyển đổi phương pháp thành các chức năng tiện ích

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4 cũng hữu ích trong các trường hợp bạn muốn chuyển đổi một phương thức yêu cầu giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 cụ thể thành hàm tiện ích đơn giản chấp nhận tham số

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 trước đó là tham số bình thường.

Lấy

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

21, ví dụ, mà bạn muốn sử dụng để chuyển đổi một đối tượng giống như mảng thành một mảng thực. Bạn có thể tạo một lối tắt như thế này:

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

2

Với

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

4, điều này có thể được đơn giản hóa.

Trong phần sau của mã,

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

23 là hàm ràng buộc với

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

24, với giá trị

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

8 được đặt thành

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

21. Điều này có nghĩa là các cuộc gọi

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

7 bổ sung có thể được loại bỏ:

function log(...args) {
  "use strict"; // prevent `this` from being boxed into the wrapper object
  console.log(this, ...args);
};
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

3

Thông số kỹ thuật

Sự chỉ rõ
Đặc tả ngôn ngữ Ecmascript # sec-function.prototype.bind # sec-function.prototype.bind

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Tại sao chúng ta cần ràng buộc trong JS?

Chúng tôi sử dụng phương thức Bind () để gọi hàm với giá trị này, từ khóa này đề cập đến cùng một đối tượng hiện đang được chọn. Nói cách khác, phương thức ind () cho phép chúng ta dễ dàng đặt đối tượng nào sẽ bị ràng buộc bởi từ khóa này khi một hàm hoặc phương thức được gọi.to call a function with the this value, this keyword refers to the same object which is currently selected . In other words, bind() method allows us to easily set which object will be bound by the this keyword when a function or method is invoked.

Bind và Call trong JavaScript là gì?

BIND: Nó liên kết hàm với giá trị được cung cấp và bối cảnh nhưng nó không thực thi hàm.Để thực hiện chức năng, bạn cần gọi chức năng.Gọi: Nó thực thi chức năng với bối cảnh và tham số được cung cấp.Áp dụng: Nó thực thi chức năng với bối cảnh và tham số được cung cấp dưới dạng mảng.

Điểm ràng buộc là gì?

Một điểm liên kết đề cập đến một vị trí trong một trò chơi video trong đó một nhân vật sẽ được gửi đến sau khi sử dụng một mục cụ thể.Tùy thuộc vào trò chơi video, điểm ràng buộc là một tòa nhà cụ thể, một chiếc thuyền, một mốc cụ thể hoặc một bộ tọa độ cụ thể.a place in a video game where a character will be sent to after using a particular item. Depending on the video game, the bind point is a specific building, a boat, a particular landmark or a specific set of coordinates.

Việc sử dụng liên kết trong React JS là gì?

React có một phương thức liên kết được xác định trước () mà chúng ta có thể sử dụng để chuyển các đối số cho một hàm trong các thành phần dựa trên lớp.to pass the arguments to a function in the class based components.