9 Application scenarios of this in JavaScript and 3 composite application scenarios _ javascript skills

This article analyzes the usage of this keyword through the application scenario in 9. For more information, see [Scenario 1]. this in the global environment points to a global object.

this.a = 10;alert(a);//10b = 20;alert(this.b);//20var c = 30;alert(this.c);//30

Scenario 2: this of an object's internal function points to the current object that calls the function.

var a = 10;var bar = { a: 20, test: function(){  alert(this.a); }}bar.test();//20

Scenario 3: this of the global environment function points to a global object.

var a = 10;function foo(){ alert(this.a);}foo();//10

Scenario 4: this in an anonymous function points to a global object.

var a = 10;var foo = { a: 20, fn: (function(){  alert(this.a); })()}foo.fn//10

Scenario 5: this in the setInterval and setTimeout timers points to the global object.

var a = 10;var oTimer1 = setInterval(function(){ var a = 20; alert(this.a);//10 clearInterval(oTimer1);},100);

Scenario 6: this in eval points to this in the call context

(function(){ eval("alert(this)");//[object Window]})();function Foo(){ this.bar = function(){  eval("alert(this)");//[object Object] }}var foo = new Foo();foo.bar();

Scenario 7: this in the constructor points to the new object constructed

function Person(name,age){ this.name = name; this.age = age; this.sayName = function(){  alert(this.name); }}var p1 = new Person('lily','20');p1.sayName();//'lily'

Scenario 8: this in new Function points to a global object.

(function(){ var f = new Function("alert(this)"); f();//[object Window]})();function Foo(){ this.bar = function(){  var f = new Function("alert(this)");  f();//[object Window] }}var foo = new Foo();foo.bar();

Scenario 9: this In apply and call points to the object in the parameter.

Var a = 10; var foo = {a: 20, fn: function () {alert (this. a) ;}}; var bar = {a: 30} foo. fn. apply (); // 10 (if the parameter is null, it points to the global object by default) foo. fn. apply (foo); // 20foo. fn. apply (bar); // 30

[Compound scenario 1]

Var someone = {name: "Bob", showName: function () {alert (this. name) ;}}; var other = {name: "Tom", showName: someone. showName} other. showName (); // Tom // the above functions are equivalent to var other = {name: "Tom", showName: function () {alert (this. name) ;}} other. showName (); // Tom

[Compound scenario 2]

Var name = 2; var a = {name: 3, fn: (function () {alert (this. name) ;}) (), fn1: function () {alert (this. name) ;}}. fn; // 2 [this in the anonymous function points to the global object]. fn1 (); // 3 [this of the internal function of the object points to the current object that calls the function]

[Compound scenario 3]

Var name = "Bob"; var nameObj = {name: "Tom", showName: function () {alert (this. name) ;}, waitShowName: function () {var that = this; setTimeout (function () {that. showName () ;}, 1000) ;}; nameObj. waitShowName (); // "Tom" [that = this changes the point of this, so that this changes from the point to the global variable to the point to nameObj] var name = "Bob "; var nameObj = {name: "Tom", showName: function () {alert (this. name) ;}, waitShowName: function () {var that = this; // that points to nameObj setTimeout (function () {alert (this. name) ;}) () ;}, 1000) ;}; nameObj. waitShowName (); // 'Bob' [form an anonymous function. this points to a global variable]

This article introduces nine application scenarios in this and hopes to help you. new content is updated every day on this site. please pay attention to this site. thank you.