Javascript知识点总结一（持续更新...）

2018-12-20

从这篇文章开始，将对js的知识点进行总结，主要是在日常开发与学习中遇到的知识，会对其进行解释说明，每篇包含几个知识点，如果知识点复杂会单独列出一篇。此类文章将不断更新。（因js过于强大，且每个人在开发时都会遇到各种各样的问题，这里写的更多是自己遇到过的，所以此类文章主要作为自己学习后的知识总结。）

一、以变量作为对象的key，其内部实现原理

以前在开发时，如果对象的key为变量，一般的写法为obj[variable]，es6之后可以直接在对象中用[]将变量包起来，即{ [variable]: 'hello' }，这两种写法，其实是调用了variable的toString方法，将其转换为字符串后放入。所以，不管是基本类型还是引用类型，都是一样的。看几个例子：

const arr = [1, 2, 3]
const obj = {
    [arr]: 'hello number'
}
console.log(obj)

这里得到的obj为：{ 1,2,3: 'hello number' }

------------------------------------------------

const obj1 = { a: 3 }
const obj2 = {
    [obj1]: 'hello object'
}
console.log(obj2)

这里得到的obj2为：{ [object,Object]: 'hello object' }

这里分别调用了数组和对象的toString方法来进行转换。

二、原生JS实现数组的map方法

数组的map方法包含接收两个参数，第一个为函数，其参数分别为当前项、当前项索引、当前项所属的数组，第二个为this的指向，一般不用传递。

Array.prototype.map1 = function(callback, context){
    const arr = this
    let newArr = []
    for(let i=0; i<arr.length; i++){
        let newValue = callback.call(context, arr[i], i, arr)
        newArr.push(newValue)
    }
    return newArr
}

例子：

const arr = [4, 5, 6, 7]
const newArr = arr.map1((item, index) => item + 1)
console.log(arr)    //[4, 5, 6, 7]
console.log(newArr) //[5, 6, 7, 8]

三、reduce实现数组map方法

Array.prototype.map2 = function(callback, context){
    const arr = this
    const newArr = arr.reduce((total, currentValue, currentIndex) => {
        let newValue = callback.call(context, currentValue, currentIndex, arr)
        return total.concat(newValue)
    })
    return newArr
}

例子跟上面一样的，这里都没做参数类型判断，基本原理都写出来了

四、js的new操作符都做了什么

1 2	function Func(){} const func = new Func()

new操作符会做以下几件事情：

1、创建一个空对象，即：let obj = new Object()

2、将obj的__proto__指向Func的prototype，即：obj.__proto__ = Func.prototype

3、让Func的this指向obj，并执行Func的函数体，即：const result = Func.call(obj)

4、判断result的类型，如果是基本类型，就返回obj，如果是引用类型，就返回result，即：

if(typeof result === 'object'){
    func = result
}else{
    func = obj
}

这里有个注意点，如果result的类型是基本类型，那func的构造函数指向Func，但如果是引用类型，func的构造函数指向对应的引用类型函数，举例说明一下：

function Func1(a, b){
    this.a = a
    this.b = b
}

const func1 = new Func1(1, 2)

则：func1.constructor === Func1

-------------------------------------

function Func2(a, b){
    this.a = a
    this.b = b
    return {
        a,
        b
    }
}

const func2 = new Func2(1, 2)

则：func2.constructor === Object

一般构造函数不写返回值，则默认的返回值为undefined，为基本类型。

五、js事件流

事件流描述的是从页面中接收事件的顺序，事件流包括下面几个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

addEventListener是指定事件处理程序的操作，这个方法接收3个参数：

1、要处理的事件名
2、作为事件处理程序的函数
3、一个布尔值。如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认值为false

如果不想要事件冒泡，可以对冒泡阻止，IE与非IE阻止冒泡的写法不一样，所以需要判断：

const btn = document.getElementById('btn')
btn.addEventListener('click', function(e){
    if(e && e.stopPropagation){
        e.stopProgapation()
    }else{
        window.event.cancelBubble = true
    }
}, false)