Heim > Web-Frontend > js-Tutorial > Hauptteil

9 Anwendungsszenarien und drei zusammengesetzte Anwendungsszenarien davon in JavaScript_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:39:37
Original
1870 Leute haben es durchsucht

【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
Nach dem Login kopieren

【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
Nach dem Login kopieren

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

var a = 10;
function foo(){
 alert(this.a);
}
foo();//10
Nach dem Login kopieren

【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
Nach dem Login kopieren

[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);
Nach dem Login kopieren

[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();
Nach dem Login kopieren

[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'
Nach dem Login kopieren

[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();
Nach dem Login kopieren

[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
Nach dem Login kopieren

【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
Nach dem Login kopieren

【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指向调用函数的当前对象]
Nach dem Login kopieren

【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指向全局变量] 
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage