原以为对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。