Hướng dẫn what is context in function javascript? - ngữ cảnh trong hàm javascript là gì?

Hướng dẫn what is context in function javascript? - ngữ cảnh trong hàm javascript là gì?

Show

Tại sao từ này lại rất quan trọng trong JavaScript?

Trong bài đăng: Hiểu về phạm vi trong JavaScript, tôi đã đề cập đến những điều cơ bản về cách phạm vi hoạt động khi xử lý các chức năng. Đôi khi, các từ phạm vi phạm vi và bối cảnh của người Hồi giáo được sử dụng thay thế cho nhau, điều này chỉ dẫn đến sự nhầm lẫn bởi vì chúng không giống nhau.scope” and “context” are used interchangeably, which only leads to confusion because they are not the same thing.

Trong JavaScript, bối cảnh của người Viking đề cập đến một đối tượng. Trong một đối tượng, từ khóa, điều này đề cập đến đối tượng đó (nghĩa là tự sướng) và cung cấp một giao diện cho các thuộc tính và phương thức là thành viên của đối tượng đó. Khi một hàm được thực thi, từ khóa, điều này đề cập đến đối tượng mà hàm được thực thi.context” refers to an object. Within an object, the keyword “this” refers to that object (i.e. “self”), and provides an interface to the properties and methods that are members of that object. When a function is executed, the keyword “this” refers to the object that the function is executed in.

Dưới đây là một vài kịch bản:

  • Khi một chức năng thực thi trong bối cảnh toàn cầu, thì điều này đề cập đến đối tượng toàn cầu hoặc cửa sổthis” refers to the global, or “window” object
  • Khi một hàm là một phương thức của một đối tượng, thì điều này đề cập đến đối tượng đó (trừ khi nó được thực thi thủ công trong bối cảnh của một đối tượng khác)this” refers to that object (unless it is manually executed in the context of a different object)
  • Khi một hàm thực thi bên trong hàm khác (bất kể được lồng sâu đến đâu), thì điều này đề cập đến đối tượng có bối cảnh trong đó nó được thực thithis” refers to the object whose context within which it is executed
  • Khi bạn khởi tạo hàm tạo hàm, bên trong đối tượng phiên bản, thì điều này đề cập đến đối tượng thể hiện

Vì vậy, như bạn có thể thấy, thì điều này có thể dễ dàng khiến bạn đau đầu. Nhưng treo ở đó; Chúng tôi đang nhận được những thứ tốt bây giờ. “this” can easily give you a headache. But hang in there; we are getting to the good stuff now.

Tóm lại, trong các chữ cái đối tượng, bạn không có các biến cục bộ; Bạn có thuộc tính của đối tượng. Vì vậy, trong đó bên trong chức năng foo () Tôi có thể nói là thức uống var = ‘bia; Đối với một đối tượng theo nghĩa đen có tên là Bar Bar, tôi sẽ nói là Bar Bar.Dink = ‘Bia. Sự khác biệt là bia bia là một tài sản của Bar Bar, trong khi khi một hàm được thực thi, một biến cục bộ được xác định bởi từ khóa VAR VAR và không thể nhìn thấy bất cứ ai hoặc bất cứ điều gì bên ngoài chức năng.var drink = ‘beer’; “, for an object literal called “bar”, I would say “bar.dink = ‘beer’. “ The difference is that “beer” is a property of “bar”, whereas when a function is executing, a local variable is defined by the “var” keyword and cannot be seen by anyone or anything outside of the function.

Ví dụ 1

drink='wine';='wine';

varfoo={foo={

    drink:"beer",drink:"beer",

    getDrink:function(){getDrink:function(){

        returndrink;return drink;

    }    }    

};;

Console.log (foo.getdrink ()); // Wine.log(foo.getDrink());// wine

Dưới đây là liên kết jsfiddle.net Ví dụ # 1: http://jsfiddle.net/q9rjv/

Trong ví dụ # 1, trước tiên chúng tôi tạo ra một biến toàn cầu có tên là Uống Uống, và đặt nó bằng với rượu vang. Chúng tôi sẽ trở lại điều đó trong một phút.Example # 1, we first create a global variable named “drink”, and set it equal to “wine”. We’ll come back to that in a minute.

Tiếp theo, chúng tôi tạo ra một đối tượng theo nghĩa đen có tên là Foo Foo, với một tài sản, đồ uống có bằng với bia bia bia. Ngoài ra còn có một phương pháp chỉ đơn giản là trả lại đồ uống. Nhưng tại sao nó lại trả lại rượu vang, chứ không phải bia bia? Điều này là do trong đối tượng, Foo Foo, người uống rượu là một tài sản của foo, không phải là một biến. Bên trong các chức năng, khi tham chiếu được thực hiện cho một biến, động cơ JavaScript tìm kiếm chuỗi phạm vi và trả về trận đấu đầu tiên mà nó tìm thấy.foo”, with a property “drink” that is equal to “beer”. There is also a method that simply returns “drink”. But why does it return “wine”, and not “beer”? This is because in the object “foo”, “drink” is a property of foo, not a variable. Inside of functions, when reference is made to a variable, the JavaScript engine searches the scope chain and returns the first match it finds.

Mặc dù chức năng này thực hiện trong bối cảnh của Foo Foo, nhưng Foo Foo không có một biến có tên là Đồ uống. Nó có một tài sản có tên là đồ uống, nhưng không phải là một biến. Vì vậy, động cơ JavaScript tìm kiếm cấp độ tiếp theo của chuỗi phạm vi. Cấp độ tiếp theo của chuỗi phạm vi là đối tượng toàn cầu, chứa một biến có tên là Đồ uống, do đó, giá trị của biến đó (rượu vang), được trả lại.foo”, “foo” does not have a variable named “drink”. It has a property named “drink”, but not a variable. So the JavaScript engine searches the next level of the scope chain. The next level of the scope chain is the global object, which contains a variable named “drink”, so the value of that variable (“wine”), is returned.

Nhưng hãy đợi một phút Kevin, làm thế nào chúng ta có thể tham khảo tài sản của người Hồi giáo, đó là trong bối cảnh của đối tượng là Foo Foo?

Tôi rất vui vì bạn đã hỏi.

Ví dụ # 2

vardrink='wine';drink='wine';

varfoo={foo={

    drink:"beer",drink:"beer",

    getDrink:function(){getDrink: function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnthis.drink;// 'this' refers to the object "foo"

    }    }    

};;

Console.log (foo.getdrink ()); // Wine.log( foo.getDrink());// beer

Dưới đây là liên kết jsfiddle.net Ví dụ # 1: http://jsfiddle.net/q9rjv/

Trong ví dụ # 1, trước tiên chúng tôi tạo ra một biến toàn cầu có tên là Uống Uống, và đặt nó bằng với rượu vang. Chúng tôi sẽ trở lại điều đó trong một phút.Example # 2, the only change we have made is that in the anonymous function that is assigned to “getDrink”, we return “this.drink” instead of “drink

Tiếp theo, chúng tôi tạo ra một đối tượng theo nghĩa đen có tên là Foo Foo, với một tài sản, đồ uống có bằng với bia bia bia. Ngoài ra còn có một phương pháp chỉ đơn giản là trả lại đồ uống. Nhưng tại sao nó lại trả lại rượu vang, chứ không phải bia bia? Điều này là do trong đối tượng, Foo Foo, người uống rượu là một tài sản của foo, không phải là một biến. Bên trong các chức năng, khi tham chiếu được thực hiện cho một biến, động cơ JavaScript tìm kiếm chuỗi phạm vi và trả về trận đấu đầu tiên mà nó tìm thấy.this” refers to that object. You can access any of the properties of the object by using the “this” keyword, add new ones (e.g. this.color = “blue”), and change existing ones (e.g. this.drink = “juice).

Mặc dù chức năng này thực hiện trong bối cảnh của Foo Foo, nhưng Foo Foo không có một biến có tên là Đồ uống. Nó có một tài sản có tên là đồ uống, nhưng không phải là một biến. Vì vậy, động cơ JavaScript tìm kiếm cấp độ tiếp theo của chuỗi phạm vi. Cấp độ tiếp theo của chuỗi phạm vi là đối tượng toàn cầu, chứa một biến có tên là Đồ uống, do đó, giá trị của biến đó (rượu vang), được trả lại.

Nhưng hãy đợi một phút Kevin, làm thế nào chúng ta có thể tham khảo tài sản của người Hồi giáo, đó là trong bối cảnh của đối tượng là Foo Foo?

vardrink='wine';drink='wine';

varfoo={};foo={};

foo.drink="beer";.drink="beer";

foo.getDrink=function(){.getDrink= function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnthis.drink;// 'this' refers to the object "foo"

    };};

Console.log (foo.getdrink ()); // Wine.log( foo.getDrink());// beer

Dưới đây là liên kết jsfiddle.net Ví dụ # 1: http://jsfiddle.net/q9rjv/

Trong ví dụ # 1, trước tiên chúng tôi tạo ra một biến toàn cầu có tên là Uống Uống, và đặt nó bằng với rượu vang. Chúng tôi sẽ trở lại điều đó trong một phút.Example # 3, we have the exact same functionality as Example # 2. From the JavaScript engine’s perspective, we have achieved the same goal, and the console output is exactly the same.

Tiếp theo, chúng tôi tạo ra một đối tượng theo nghĩa đen có tên là Foo Foo, với một tài sản, đồ uống có bằng với bia bia bia. Ngoài ra còn có một phương pháp chỉ đơn giản là trả lại đồ uống. Nhưng tại sao nó lại trả lại rượu vang, chứ không phải bia bia? Điều này là do trong đối tượng, Foo Foo, người uống rượu là một tài sản của foo, không phải là một biến. Bên trong các chức năng, khi tham chiếu được thực hiện cho một biến, động cơ JavaScript tìm kiếm chuỗi phạm vi và trả về trận đấu đầu tiên mà nó tìm thấy.drink” and “getDrink” at the exact same time that we created the object literal “foo”. It is all one expression. In Example # 3, we create an empty object named “foo” first, and then use dot notation to add properties to the object one-by-one. I just wanted to point out that there is more than one way to go about all of this from a syntax perspective.

Các chữ cái đối tượng có thể chứa các chữ cái khác và những đối tượng đó có bối cảnh riêng của chúng

Ví dụ # 4

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

vardrink='wine';drink='wine';

varfoo={};foo={};

foo.drink="beer";.drink="beer";

foo.getDrink=function(){.getDrink= function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnthis.drink;// 'this' refers to the object "foo"

    };};

foo.under21={};.under21={};

foo.under21.drink='soda';.under21.drink='soda';

foo.under21.getDrink=function(){.under21.getDrink=function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;return this.drink;// 'this' refers to the object "foo.under21"

    };};

Console.log (foo.getdrink ()); // Bia.log(foo.getDrink());// beer

Console.log (foo.under21.getdrink ()); // soda.log( foo.under21.getDrink());// soda

Dưới đây là liên kết jsfiddle.net Ví dụ # 4: http://jsfiddle.net/8p38y/

Trong ví dụ # 4, chúng tôi đã thêm một thuộc tính mới vào Foo Foo, và thuộc tính đó là một đối tượng khác. Lúc đầu, nó trống (tức là foo.under21 = {}), và sau đó chúng tôi thêm hai thuộc tính vào nó. Tài sản đầu tiên là đồ uống của người Hồi giáo, được đặt bằng với soda soda. Don Tiết, nhầm lẫn điều này với tài sản, đồ uống, được đặt trong bối cảnh của Foo Foo, tương đương với bia bia bia. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda.Example # 4, we have added a new property to “foo”, and that property is yet another object. At first it is empty (i.e. foo.under21 = {}), and then we add two properties to it. The first property is “drink”, which is set equal to “soda”. Don’t’ confuse this with the property “drink” that is set in the context of “foo” which is equal to “beer”. In the context of “foo.under21”, “drink” is equal to “soda”.

Thuộc tính thứ hai của FOO.under21, có chức năng ẩn danh được gán cho nó. Chức năng ẩn danh đó trả về điều này. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda, vì vậy, việc gọi chức năng đó sẽ trả về Soda Soda.foo.under21” has an anonymous function assigned to it. That anonymous function returns “this.drink”. In the context of “foo.under21”, “drink” is equal to “soda”, so calling that function returns “soda”.

Vì vậy, điểm của ví dụ này là các chữ cái có thể có các thuộc tính là các đối tượng của chính chúng và những đối tượng đó có bối cảnh riêng của chúng. Khi các chức năng thực thi trong bối cảnh của các đối tượng đó, điều này đề cập đến đối tượng, v.v. Tôi nhận thức được không giới hạn cho loại đối tượng này làm tổ.this” refers to the object, and so on. I am aware of no limit to this kind of object nesting.

Các phương thức JavaScript .Call () và .Apply () cho phép bạn tự động thay đổi ngữ cảnh trong đó một hàm được thực thi

Ví dụ # 5

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

drink='wine';='wine';

varfoo={};foo={};

foo.drink="beer";.drink="beer";

foo.getDrink=function(){      .getDrink= function(){      

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnthis.drink;// 'this' refers to the object "foo"

    };};

foo.under21={};.under21 ={};

foo.under21.drink='soda';.under21.drink='soda';

foo.under21.getDrink=function(){.under21.getDrink=function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnfoo.getDrink.call();// execute foo.getDrink()                

    };};

Console.log (foo.getdrink ()); // Bia.log( foo.getDrink());// beer

Console.log (foo.under21.getdrink ()); // soda.log(foo.under21.getDrink());// wine

Dưới đây là liên kết jsfiddle.net Ví dụ # 4: http://jsfiddle.net/8p38y/

Trong ví dụ # 4, chúng tôi đã thêm một thuộc tính mới vào Foo Foo, và thuộc tính đó là một đối tượng khác. Lúc đầu, nó trống (tức là foo.under21 = {}), và sau đó chúng tôi thêm hai thuộc tính vào nó. Tài sản đầu tiên là đồ uống của người Hồi giáo, được đặt bằng với soda soda. Don Tiết, nhầm lẫn điều này với tài sản, đồ uống, được đặt trong bối cảnh của Foo Foo, tương đương với bia bia bia. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda.Example # 5, why does a call to “foo.under21.getDrink()” now return “wine” ?

Thuộc tính thứ hai của FOO.under21, có chức năng ẩn danh được gán cho nó. Chức năng ẩn danh đó trả về điều này. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda, vì vậy, việc gọi chức năng đó sẽ trả về Soda Soda.this.drink”, we use the JavaScript “.call()” method, which allows you to execute any function in the context of another object. When you do not specify the context in which that function is to be “called”, it executes in the context of the global object. In the global context, there is a variable named “drink” and it is equal to “wine”, so “wine” is returned.

Vì vậy, điểm của ví dụ này là các chữ cái có thể có các thuộc tính là các đối tượng của chính chúng và những đối tượng đó có bối cảnh riêng của chúng. Khi các chức năng thực thi trong bối cảnh của các đối tượng đó, điều này đề cập đến đối tượng, v.v. Tôi nhận thức được không giới hạn cho loại đối tượng này làm tổ.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

drink='wine';='wine';

varfoo={};foo={};

foo.drink="beer";.drink="beer";

foo.getDrink=function(){      .getDrink= function(){      

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnthis.drink;// 'this' refers to the object "foo"

    };};

foo.under21={};.under21 ={};

foo.under21.drink='soda';.under21.drink='soda';

foo.under21.getDrink=function(){.under21.getDrink=function(){

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;returnfoo.getDrink.call(this);// execute foo.getDrink()                

    };};

Console.log (foo.getdrink ()); // Bia.log( foo.getDrink());// beer

Console.log (foo.under21.getdrink ()); // soda.log(foo.under21.getDrink());// soda

Dưới đây là liên kết jsfiddle.net Ví dụ # 4: http://jsfiddle.net/8p38y/

Trong ví dụ # 4, chúng tôi đã thêm một thuộc tính mới vào Foo Foo, và thuộc tính đó là một đối tượng khác. Lúc đầu, nó trống (tức là foo.under21 = {}), và sau đó chúng tôi thêm hai thuộc tính vào nó. Tài sản đầu tiên là đồ uống của người Hồi giáo, được đặt bằng với soda soda. Don Tiết, nhầm lẫn điều này với tài sản, đồ uống, được đặt trong bối cảnh của Foo Foo, tương đương với bia bia bia. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda.Example # 6, “soda” is returned because when we used the JavaScript “.call()” method, we specified the context in which the function is to execute. In this case, the context we specify is “this”. “this”refers to the context of “foo.under21”, and “foo.under21” has a property named “drink”, so the value “soda” is returned.

Thuộc tính thứ hai của FOO.under21, có chức năng ẩn danh được gán cho nó. Chức năng ẩn danh đó trả về điều này. Trong bối cảnh của foo.under21, thì đồ uống có bằng với soda soda, vì vậy, việc gọi chức năng đó sẽ trả về Soda Soda.

Vì vậy, điểm của ví dụ này là các chữ cái có thể có các thuộc tính là các đối tượng của chính chúng và những đối tượng đó có bối cảnh riêng của chúng. Khi các chức năng thực thi trong bối cảnh của các đối tượng đó, điều này đề cập đến đối tượng, v.v. Tôi nhận thức được không giới hạn cho loại đối tượng này làm tổ.

Các phương thức JavaScript .Call () và .Apply () cho phép bạn tự động thay đổi ngữ cảnh trong đó một hàm được thực thithis” keyword refers to the object that the function is a property of, because the function executes in the context of that object. By using the JavaScript “.call()” method (or “.apply()” method), you can programmatically change the context in which that function executes, which changes the meaning of the “this”accordingly.

Bối cảnh chức năng là gì?

Các hàm bối cảnh là các hàm với (chỉ) các tham số ngữ cảnh. Các loại của chúng là loại chức năng bối cảnh. Dưới đây là một ví dụ về loại chức năng bối cảnh: Loại thực thi [t] = execContext? => T. Các hàm ngữ cảnh được viết bằng cách sử dụng? => Là dấu "mũi tên".functions with (only) context parameters. Their types are context function types. Here is an example of a context function type: type Executable[T] = ExecutionContext ?=> T. Context functions are written using ?=> as the "arrow" sign.

Biến bối cảnh trong JavaScript là gì?

Bối cảnh có liên quan đến các đối tượng.Nó đề cập đến đối tượng mà một hàm thuộc về.Khi bạn sử dụng từ khóa JavaScript này, từ khóa này, nó đề cập đến đối tượng mà hàm thuộc về.Phạm vi đề cập đến khả năng hiển thị của các biến và nội dung đề cập đến đối tượng mà một hàm thuộc về.It refers to the object to which a function belongs. When you use the JavaScript “this” keyword, it refers to the object to which function belongs. Scope refers to the visibility of variables, and content refers to the object to which a function belongs.

Phạm vi và bối cảnh có giống nhau không?

Phạm vi liên quan đến khả năng hiển thị của các biến và ngữ cảnh đề cập đến đối tượng trong đó một hàm được thực thi..

Bối cảnh trong môi trường JavaScript là gì?

Một bối cảnh là một nơi trong đó một chức năng đang được thực thi.Từ khóa bên trong chức năng luôn chỉ vào bối cảnh mà nó đang được thực thi hoặc nơi nó thuộc về.Trong cửa sổ JavaScript (Trình duyệt web) là một đối tượng toàn cầu trong đó tất cả các chức năng được thực thi trừ khi chúng được xác định hoặc cung cấp một số bối cảnh khác.a place in which a function is being executed. this keyword inside function always points to the context in which it is being executed or where it belongs. In JavaScript(web browser) Window is a global object in which all functions gets executed unless they are defined or provided with some other context.