前端攻城狮必备的基础知识

此文章作为我个人的前端基础笔记分享，其中可能大部分都是偏基础一些的，但是万层高楼平地起，自己也处于一个不断学习不断进步的过程，可能涵盖面不是很广，但是也是属于必备基础，共勉共同学习，让我们走向人生的巅峰。

JS相关

原型链：

同一函数构造出的实例对象能共享这个函数的prototype下的方法和属性，每个实例对象都有一个_proto_属性，作为实例对象的指针，指向函数的prototype，保存了构造函数的原型对象地址，通过这个属性就可以拥有原型对象下的所有属性和方法，_proto_属性实际就是实例化对象和原型对象之间的连接，并且可以一层一层的向上寻找到自己的原型对象，形成链式关系。

this指向问题

全局环境下的this: this始终指向全局对象

var a = 1
function test () {
    console.log(this.a)
}
test() // 1

函数上下文调用的时严格模式，this指向值为undefined，非严格模式在想window对象。

'use strict';
function test () {
    console.log(this)
}
test() // undefined

对象中的this：函数定义位置和this指向无关，只与调用对象有关。多层嵌套对象，this指向离被调函数最近的对象

var A = {
    prop: 37,
    f: function() {
        return this.prop
    }
}
console.log(A.f()) // 37


var B = A.f()
console.log(B()) // undefined  *在B的同级下未找到prop属性

原型链中的this：原型链中的this仍指向直接调用者

var A = {
    f: function () {
        return this.a + this.b
    }
}
var B = object.creat(A)
B.a = 2
B.b = 2
console.log(B.f())  // 4

构造函数中的this指向：与创建的新对象绑定

function A () {
    this.b = 10
}
var C =  new A()
console.log(C.b) // 10

当构造函数返回的默认值是一this引用对象时，可手动设置返回其他对象，如果返回值不为对象或function，则返回this。

function A () {
    this.b = 10
    return {b: 20}
}
var C = new A()
conosole.log(C.b) // 20

ES6箭头函数，就是this是继承自父执行上下文！！中的this，比如这里的箭头函数中的this.x，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际上表示的是window.x，因此输出的是11。正是因为它没有this，所以也就不能用作构造函数

var x=11;
var obj={
 x:22,
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//输出的值为11

未完待续，持续更新中…… 路漫漫其修远兮

前端攻城狮必备“武器”

前端攻城狮必备的基础知识

JS相关

原型链：

this指向问题