Heim >Web-Frontend >js-Tutorial >9 Anwendungsszenarien und drei zusammengesetzte Anwendungsszenarien davon in JavaScript_Javascript-Kenntnissen

9 Anwendungsszenarien und drei zusammengesetzte Anwendungsszenarien davon in JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:39:371876Durchsuche

【Szenario 1】Dies in der globalen Umgebung zeigt auf das globale Objekt

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

【Szenario 2】Diese interne Funktion des Objekts zeigt auf das aktuelle Objekt, das die Funktion aufruft

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

[Szenario 3] Diese Funktion der globalen Umgebung zeigt auf das globale Objekt

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

【Szenario 4】Dies in der anonymen Funktion zeigt auf das globale Objekt

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

[Szenario 5] Dies in den Timern setInterval und setTimeout zeigt auf das globale Objekt

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

[Szenario 6] Dies weist im Aufrufkontext darauf hin

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

[Szenario 7] Dies im Konstruktor zeigt auf das erstellte neue Objekt

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'

[Szenario 8] Diese neue Funktion zeigt auf das globale Objekt

(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();

[Szenario 9] this in apply and call verweist auf das Objekt im Parameter

var a = 10;
var foo = {
 a: 20,
 fn: function(){
  alert(this.a);
 }
};
var bar ={
 a: 30
}
foo.fn.apply();//10(若参数为空,默认指向全局对象)
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30

【Zusammengesetzte Szene 1】

var someone = {
 name: "Bob",
 showName: function(){
  alert(this.name);
 }
};
var other = {
 name: "Tom",
 showName: someone.showName
}
other.showName();  //Tom

//以上函数相当于

var other = {
 name: "Tom",
 showName: function(){
  alert(this.name);
 }
}
other.showName();  //Tom

【Zusammengesetzte Szene 2】

var name = 2;
var a = {
 name: 3,
 fn: (function(){
  alert(this.name);
 })(),
 fn1:function(){
  alert(this.name);
 }
}
a.fn;//2[匿名函数中的this指向全局对象]
a.fn1();//3[对象内部函数的this指向调用函数的当前对象]

【Zusammengesetzte Szene 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改变this的指向,使this从指向全局变量变化到指向nameObj]

var name = "Bob"; 
var nameObj ={ 
 name : "Tom", 
 showName : function(){ 
  alert(this.name); 
 }, 
 waitShowName : function(){
  var that = this;//that指向nameObj
  setTimeout(function(){
   (function(){ 
    alert(this.name);
   })();
  }, 1000);
 }
}; 
nameObj.waitShowName();// 'Bob'[形成匿名函数,this指向全局变量] 

Dieser Artikel stellt Ihnen 9 Anwendungsszenarien vor. Ich hoffe, dass er Ihnen weiterhilft. Diese Seite wird täglich mit neuen Inhalten aktualisiert.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn