每日JavaScript -17

原以为对JS有所熟悉，谁不知道还远远不够。
在数组开头添加元素，方法有二

arr.unshift('start')
['start', ...arr]

自己手写的原生ajax请求

const xhr = new XMLhttpRequest()
xhr.open('get','example.php', true)
xhr.onreadystatechange = function (sucess, fail) {
	if (xhr.readyState === 4) {
		if (xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304) {
			sucess(responseText)
		} else {
			fail()
		}
	}
}
xhr.send(null)

https://www.jianshu.com/p/d647aa6d1ae6
简单谈论一下this
简单的代码如下

var a = 20;

function fn() {
  console.log(this.a);
}
fn();

很明显this指向window，然后a = 20。
但当我用了严格模式，发现竟然报错了。

var a = 20;

function fn() {
  console.log(this.a);
}
fn();

我们要谨记一句话：this的指向，是在函数被调用的时候确定的，在函数执行过程中，this一旦被确定，就不可更改了。
这是因为：如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a;
    }
}

console.log(obj.c);
console.log(obj.fn());

代码输出什么？
答案是40和10，因为仅是单独的{}是不会形成新的作用域的，所以this指向window

'use strict';
var a = 20;
function foo () {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    }
    return obj.c;

}
console.log(foo());    // ？
console.log(window.foo());  // ?

分别输出什么？
答案是报错和40
因为是严格模式，单独调用函数this指向undefined，所以第一个console.log会报
在undefined中没有a属性的错误
第二个而window.foo()则因为foo被window所拥有，内部的this就指向了window对象,所以输出40.
让我觉得匪夷所思

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
// 被foo拥有，this指向foo
console.log(foo.getA()); // 10

var test = foo.getA;
// 单独调用test()，this指向undefined，在非严格模式下自动指向window
console.log(test());  // 20

以下代码

function foo() {
  console.log(this.a)
}

function active(fn) {
  fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
  a: 10,
  getA: foo
}

console.log(active(obj.getA));

输出的20。一开始，我以为输出10，后来再看看obj不是函数，没有单独作用域，this还是指向undefined，所以才会输出20.

call和apply都能改变this指向，区别在于call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

function Person(name, age) {

    // 这里的this指向了谁?
    this.name = name;
    this.age = age;   
}

Person.prototype.getName = function() {

    // 这里的this又指向了谁？
    return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);
p1.getName();

这里我也错了。两个this都指向实例。我们来分析以下：
让我们回想那句话：this的指向，是在函数被调用的时候确定的。
那么Person在哪里调用?

var p1 = new Person('Nick', 20);

在使用new时候调用，那么new做了什么事情？

通过new操作符调用构造函数，会经历以下4个阶段。

创建一个新的对象；（实例）
将构造函数的this指向这个新对象；
指向构造函数的代码，为这个对象添加属性，方法等；
返回新对象。
这里我们可以看到this就是指向实例p1
原型方法的this又指向哪里？

p1.getName();

p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。