了解神奇的this

this的用法
　　在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了.

　　因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下环境.举例说明

1. 构造函数之this

　　function Foo() {
   　　 this.name = "zhangsan";
   　　 this.age = 20;
    　　console.log(this);
　　}
　　var f1 = new Foo();

说明:
1. 如果函数作为构造函数使用,那么其中的this就代表它new出来的对象
2. 如果函数作为普通函数调用,这种情况this是指window.

　　function Foo() {
   　　 this.name = "zhangsan";
   　　 this.age = 20;
    　　console.log(this);
　　}
　　Foo();
　　console.log(window.name);
　　console.log(window.age);

2. 函数作为对象的一个属性
　　如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对

　　var obj = {
  　　  x:10,
    　　fn:function() {
      　　  console.log(this.x);
   　　 }
　　};
　　obj.fn();

　　var obj = {
   　　 x:10,
   　　 fn:function() {
       　　 console.log(this.x);
    　　}
　　};
　　var obj1 = {
    　　x:20
　　};
　　obj1.fn = obj.fn;
　　obj1.fn();

3. 函数用call或apply调用
　　当一个函数被call和apply调用时,this的值就去传入的对象的值

　　var test = "Tony";
　　function doSomething() {
　　console.log(this.test);
　　}
　　var obj = {
　　 test:"Tom"
　　};
　　doSomething();
　　doSomething.call(obj);//doSomething中的this指向obj

4. 全局&普通函数的调用
　　在全局环境下,this指向的是window对象

　　　　console.log(this === window);//true

　　普通函数调用时,其中的this也是指向的window对象

　　var x = 10;
　　var fn = function() {
　　console.log(this);//window
　　 console.log(this.x);//10
　　};
　　fn();
注意以下情况:虽然函数f是在obj对象内部定义的,但是他任然是一个普通函数,this指向的还是window对象.

5. 构造函数prototype
　　this代表的是当前对象的值,不仅仅是在构造函数的prototype,即便是在整个原型链中.

　　function Fn(name, age) {
  　　  this.name = name;
   　　 this.age = age;
　　}
　　Fn.prototype.sayName = function() {
   　　 console.log(this.name);
　　};
　　var f1 = new Fn("zhangsan", 20);
　　console.log(f1.name);

秒客网

了解神奇的this

相关文章