ECMAScript针对js中this的一点点知道

1 当函数作为靶子的法吃调用的时段 this就赖于该目标

 

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

 

上面的例子中,当 o.f() 被调用时,函数内之this将绑定到o对象。

在哪儿或者如何定义调用函数完全无会见潜移默化及this的一言一行。在达到一个事例中,我们于定义o的时段也夫成员f定义了一个匿名函数。但是,我们吧得率先定义函数然后还用那个直属到o.f。这样做this的所作所为呢一如既往:

 

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

 

当时说明this的价只有同函数 f 作为 o 的积极分子被调用有关系。

类之,this
的绑定只为最贴近的成员引用的影响。在底下的这例子中,我们管一个主意g当作对象o.b的函数调用。在这次实施中,函数中之this将对准o.b。事实上,这跟目标自我的分子没有多大关系,最靠近的援才是无限紧要的。

 

o.b = {
  g: independent,
  prop: 42
};
console.log(o.b.g()); // logs 42

 

 

2 作为日常函数调用的时节 thi指向全局对象window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1"></div>
<script>
    window.id = 'window';
    document.getElementById('div1').onclick = function () {
        console.log(this.id); //div1
        var cb = function () {
            console.log(this.id); 
        };
        cb(); //window
    }
</script>
</body>
</html>

上述代码中的document.getElementById(‘div1’)返回一个dom元素对象,所以该点击监听事件作该对象的办法调用,this指于id为div1的dom元素对象,this.id为div1;

苟点击事件受到的函数cb是司空见惯函数,所以this指于window,this.id为window。

 

3 在严模式下this不会指向全局对象,而是undefined
, 如下:

function func () {
  'use strict';
 console.log(this === undefined);
}
func();  // true

 

4 丢失的this

var obj = {
        name: 'peak',
        getName: function () {
            return this.name;
        }
    };
    console.log(obj.getName()); // peak
    var getNm = obj.getName;
    console.log(getNm()); // undefined

调用obj.getName时 getName方法作为obj对象的艺术为调用 此时this指于obj对象

当obj.getName 赋值给 getNm 时 调用getNm 是用作普通函数的调用 此时this指于全局对象window

 

5 构造函数中的this

假定函数和new关键字并以,则这函数称为构造函数。在函数内部,this会指向新创建的对象。

    function Foo(){
        this.name = "foo"; 
    }
    Foo.prototype.sayHello = function(){
        console.log('hello,'+this.name)
    };

    var foo = new Foo();
    foo.sayHello;  // hello,fo

上述代码中this则指向新创造的靶子foo

顾:构造器可以手动设置返回外的靶子,如果回到值未是一个对象,则归this,否者,返回该目标。

function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); /

 

6 用到apply、call显示的装this

function foo(a, b, c) {}
var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将作为函数的参数被接收,如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是:a = 1, b = 2, c = 3

当使用
Function.prototype 上的 call 或者 apply 方法时,函数内的 this
将会晤为 显式设置也函数调用的首先单参数。

之所以函数调用的平整以上例中一度不适用了,在foo
函数内 this 被装成了 bar。

使用 call 和 apply 函数的时候要注意,如若传递的
this 值不是一个对象,JavaScript 将会晤尝试运用中 ToObject
操作将那个更换为对象。因此,如果传递的价值是一个原始值比如 7
'foo',那么就会采取有关构造函数将它换为对象,所以原始值 7 通过new Number(7)叫转换为对象,而字符串'foo'使用 new String('foo')转发为目标,例如:

 

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]

 

 

7 bind 方法

ECMAScript 5
引入了Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数,但是在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

 

留神:
在目标的字面声明语法中,this 不能够为此来针对对象自我。 因此
var obj = {me: this} 中的 me 不会指向 obj,因为 this
只可能出现于上述的五种植情景中。
这个事例中,如果是以浏览器中运作,obj.me 等于 window 对象。