JS面试题（进阶）——原型链、this指向、闭包

知识点：

• 原型链

• this指向
• 作用域和预解析
• new关键字
• 闭包
• DOM事件
• 继承

原型链

面试题(一)：

var F = function() {};
Object.prototype.a = function() {
  console.log("aa");
};
Function.prototype.b = function() {
  console.log("bb");
};
var f = new F();
F.a();  //aa
F.b();  //bb
f.a();   //aa 
f.b();   // 抱错，f.b is not a function

面试题(二)：

function A() {
    this.name = 'a'
    this.color = ['green', 'yellow']
}
function B() {
}
B.prototype = new A()
var b1 = new B()
var b2 = new B()

b1.name = 'change'
b1.color.push('black')
console.log(b2.name)   // a 
console.log(b2.color)  // green yellow black

this指向(有四种)

第一种：方法调用

var age = 38;
var obj = {
    age: 18,
    getAge: function() {
        console.log(this.age);
    }
};
obj.getAge(); 
--------------------------------------------------
// 变式：
var fn = obj.getAge;
fn();   

第二种：函数调用，里面的this指向的是window

var age = 38;
var obj = {
    age: 18,
    getAge: function() {
        var fn = function() {
            console.log(this.age);
        };
        fn();
    }
};
obj.getAge();

第三种：构造函数调用：this指向调用它的对象

var age = 38;
var obj = {
    age: 18
};

var getAge = function() {
    console.log(this.age);
};
obj.get = getAge;
obj.get(); 

第四种：上下文调用模式，this指向谁？指向的是传入的对象

call 和 apply

作用域和预解析

let var const 函数作用域 {}

new 关键字的作用

1、在函数里面创建一个对象obj

2、将函数里面的this指向创建的那个对象obj

3、返回这个obj对象

综合面试题：

function Foo() {
    getName = function(){ alert(1); };
    return this; 
}

Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); }

Foo.getName();            
getName();                 
Foo().getName();           
getName();                 
new Foo.getName();         
new Foo().getName();       
new new Foo().getName();   

闭包

闭包的概念：

闭包的使用场景：

闭包的问题：让变量得不到释放，增加内存使用率

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

DOM 事件

给DOM 添加点击事件：

• dom.onclick = function(){}
• dom.addEventListener(事件类型 事件处理函数 冒泡或者捕获)

区别：onclick 会覆盖相同的事件，addEventListener会逐一的触发

DOM 事件三要素: 事件源， 事件类型， 事件处理程序

事件流程： 冒泡，捕获

继承

ES5的继承

1、构造函数实现继承

    function Parent(){
             this.name = "parent"
        }
    Parent.prototype.aa=function(){}
    function Child(){
         Parent.call(this)
         this.type ="child"
    }
    console.log(new Child())

2、借助原型是实现继承

    function Parent(){
        this.name = "parent"
        this.arr = [1,2,3]
    }
    function Child(){
        this.type = "child"
    }
    Child.prototype = new Parent()
    var A = new Child()
    var B = new Child()
        
    A.arr.push(4)
    console.log(A,B)

3、组合方式实现继承

function Parent(){
    this.name = "parent"
    this.arr = [1,2,3]
}
function Child(){
    Parent.call(this)
    this.type = "child"
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.construcotr = Child
var A = new Child()
var B = new Child()

A.arr.push(4)
console.log(A,B)

ES6的继承

class People{
        constructor(name,age){
             this.name = name
             this.age = age
        }
    eat(){
    }
}
class Student extends People{
    constructor(id,name,age){
        super(name,age)
        this.id = id
    }
}

深入学习可参考：https://juejin.im/post/5daeefc8e51d4524f007fb15?utm_source=gold_browser_extension#heading-22