说出this的三个应用

1.this是javascript中的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
2.随着函数使用场合的不同,this的值会发生变化,但是有一个原则,就是this指的是调用函数的那个对象。
3.this分类
1)纯粹的函数调用
这时的this指向window。(函数没有所属对象:指向全局对象)
eg:
var x=1;
function test(){
alert(this.x);
}
test();

2)作为对象方法的调用
这时的this指向上级对象。(函数有所属对象时:指向所属对象)
eg:
function test(){
alert(this.x)
}
var o={};
o.x=1;
o.m=test;
o.m();
3)作为构造函数调用
构造函数,就是通过这个函数生成一个新对象。这时的this指向这个新对象。(构造器中的 this:指向新对象)
eg:
function test(){
this.x=1;
}
var o=new test();
alert(o.x);



var x=2;
function test(){
this.x=1;
}
var o=new test();
alert(x);



function foo(){return this.a};
var a=2;
var o={a:3,foo:foo};
var p={a:4};
console.log(o.foo());
p.foo=o.foo;
console.log(p.foo());
console.log(foo());

4)apply或者call的调用
是改变函数对象的一个方法,作用是改变函数的调用对象。
eg:
var x=0;
function test(){
alert(this.x);
}
var o={};
o.x=1;
o.m=test;
o.m();
o.m.apply();

例题
//1
var point={
x:0,
y:0,
moveTo:function(x,y){
this.x=this.x+x;
this.y=this.y+y;
alert(this.x); //1
alert(this.y); //1
}
}
point.moveTo(1,1);

//2
var myObject = {value: 100};
myObject.getValue = function () {
console.log(this.value);
console.log(this);
return this.value;
};
console.log(myObject.getValue()); // 100 object{value: 100} 100

//3
var myObject = {value: 100};
myObject.getValue = function () {
var foo = function () {
console.log(this.value);
console.log(this);
};
foo();
return this.value;
};
console.log(myObject.getValue()); //undefined window 100

//4
var SomeClass = function(){
this.value = 100;
}
var myCreate = new SomeClass();
console.log(myCreate.value); //100

//5
var myObject = {value: 100};
var foo = function(){
console.log(this);
};
foo(); //window
foo.apply(myObject); //object{value: 100}
foo.call(myObject); //object{value: 100}

//6
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var sayhello = function(sth) {
console.log(this.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world"); //clever coder says hello world

//7
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this;
var sayhello = function(sth) {
console.log(that.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world"); ////foocoder says hello world

//1
var point={
x:0,
y:0,
moveTo:function(x,y){
this.x=this.x+x;
this.y=this.y+y;
console.log(this.x);
console.log(this.y);
}
};
point.moveTo(1,1); //1 1

//2
var myObject = {value: 100};
myObject.getValue = function () {
console.log(this.value);
console.log(this);
return this.value;
};
console.log(myObject.getValue()); //100 object 100

//3
var myObject = {value: 100};
myObject.getValue = function () {
var foo = function () {
console.log(this.value);
console.log(this);
};
foo();
return this.value;
};
console.log(myObject.getValue());//undefined window 100

//4
var SomeClass = function(){
this.value = 100;
}
var myCreate = new SomeClass();
console.log(myCreate.value); //100

//5
var myObject = {value: 100};
var foo = function(){
console.log(this);
};
foo(); //window
foo.apply(myObject);//Object
foo.call(myObject); //Object

 //6
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var sayhello = function(sth) {
console.log(this.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world"); //clever coder says hello world


//7
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this;
var sayhello = function(sth) {
console.log(that.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world"); //foocoder says hello world

//8
var name="window";
var Bob={
name:"Bob",
showName:function(){
alert(this.name);
}
};
var Tom={
name:"Tom",
showName:function(){
var fun=Bob.showName;
fun();
}
}
Tom.showName(); //window

//9
var name="Bob";
var nameObj={
name:"Tom",
showName:function(){
alert(this.name);
},
waitShowName:function(){
!function(__callback){
__callback();
}(this.showName);
}
}
nameObj.waitShowName(); //Bob

 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


posted @ 2016-10-06 15:17  liwei742314100  阅读(599)  评论(0编辑  收藏  举报