JavaScript 几个易错知识点

1.面向对象编程

举一个 例子说明一下：

面向对象思想： 猫.抓(老鼠)

面向过程思想： 抓.(猫,老鼠)

//面向对象
//定义猫（名字）
let Cat=function(name){
    this.name=name;
}
//动作
Cat.prototype={
    catch:function(someThing){
        console.log(`${this.name}抓${someThing}`);
    }
}
//创建一个猫对象
let daidai=new Cat('呆呆');
daidai.catch('老鼠');

//面向过程
let catch = function(who,someThing){
    console.log(`${this.name}抓${someThing}`);
}
catch("daidai","老鼠")

虽然结果相同，但是不难发现面向对象更加的灵活，复用性和扩展性更加。因为面向对象就是针对对象来进行执行某些动作。这些动作可以自定义扩展。

而面向过程是定义很多的动作，来指定谁来执行这个动作。

2.this

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

下面分几种情况谈论下

1).普通函数调用

这个情况没特殊意外，就是指向全局对象-window。

var username='mayue'
function fn(){
    alert(this.username);//mayue
}
fu();
//---------------
window.username='mayue'
function fn(){
    alert(this.username);//mayue
}
fn();
//可以理解为
//window.fn();

但是下面这种情况输出的就会是undefined,因为是let声明，不会是window对象

let username='mayue'
function fn(){
    alert(this.username);//undefined
}
fn();

2).对象函数调用

那个函数调用，this就指向哪里

3).构造函数调用

let TestClass=function(){
    this.name='yuema';
}
let subClass=new TestClass();
subClass.name='mayue';
console.log(subClass.name);//mayue
let subClass1=new TestClass();
console.log(subClass1.name)//yuema

注意：在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象

4).apply和call调用

apply和call简单来说就是会改变传入函数的this。

5).箭头函数调用

let obj={
    a:"mayue",
    fn:function(){    
        setTimeout(()=>{console.log(this.a)});
    }
};
obj.fn();//mayue

输出 mayue 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出 mayue 。

3.call和apply

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。
call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。
apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

let obj1={
    a:"mayue"
};
let obj2={
    a:"yuema",
    fn:function(){
        alert(this.a);
    }
}
obj2.fn.call(obj1);

call 和 apply 两个主要用途就是

1.改变 this 的指向（把 this 从obj2 指向到obj1）

2.方法借用（obj1没有 fn，只是借用obj2方法）