js面试题1

1. 原型链

1.1 对象原型

js中所有的对象都有一个__proto__属性指向构造函数的原型对象

1.2 构造函数的原型对象

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。

1.3 构造函数

对象原型 ( __proto__ ) 和 构造函数 ( prototype ) 原型对象 里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。

1.4 JavaScript 的成员查找机制(规则)

• 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
• 如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）。
• 如果还没有就查找原型对象的原型（Object的原型对象）。
• 依此类推一直找到 Object 为止（null）。
• __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

2. 继承

2.1 原型继承

function Father(name,age) {
    this.name = name;
    this.age = age;
}
Father.prototype.pay=function(){
    console.log('付钱');
}
function Son(name,age){
    this.name = name;
    this.age = age;
}
Son.prototype=new Father()
let son=new Son();
son.pay() //付钱
// son实例上没有pay方法去__proto__上找，-->Father的实例对象，也没有，-->father实例的__proto__等于Father 构造函数的对象原型上有pay 方法

2.2 组合继承

是使用原型链实现对原型属性和方法的继承 (主要是方法)，而通过借用构造函数来实现对实例属性构造的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它的自己的属性。

function Father(name,age) {
    this.name = name;
    this.age = age;
}
Father.prototype.pay=function(){
    console.log('付钱');
}
function Son(name,age){
// 利用父亲构造函数来继承属性
    Father.call(this.name)
    this.age = age;
}
// 利用原型链继承方法
Son.prototype=new Father()
let son=new Son();
son.pay() //付钱
// son实例上没有pay方法去__proto__上找，-->Father的实例对象，也没有，-->father实例的__proto__等于Father 构造函数的对象原型上有pay 方法

2.3 寄生组合继承

Object.create(参数对象),

Object.create 会创建一个新对象,并且这个新对象的__proto__ 会指向传入的参数对象

function Father(name,age) {
    this.name = name;
    this.age = age;
}
Father.prototype.pay=function(){
    console.log('付钱');
}
function Son(name,age){
// 利用父亲构造函数来继承属性
    Father.call(this.name)
    this.age = age;
}
// 利用原型链继承方法
// Son.prototype=new Father()//这样它的age和name 都是undefined 并没有用
Son.prototype=Object.create(Father.prototype);
let son=new Son('zs',18);
son.pay() //付钱
console.log(son);
// son实例上没有pay方法去__proto__上找，-->Father的实例对象，也没有，-->father实例的__proto__等于Father 构造函数的对象原型上有pay 方法

2.4 class 实现继承 extends

class Person {
  constructor (name, age) {
    this.name = name
    this.age = age
  }
  jump () {
    console.log('会跳')
  }
}

class Teacher extends Person {
  constructor (name, age, lesson) {
    super(name, age) // extends 中, 必须先调用 super(), 会触发执行父类的构造函数
    this.lesson = lesson
    console.log('构造函数执行了')
  }
  sayHello () {
    console.log('会打招呼')
  }
}
class student extends Person{}
const student = new Student()
console.log(student);// 如果extends 没有写constructor 默认会加上，并且继承父类的所有属性
 class Child extends Person {
      jump() {
          super.jump(); // super 作为对象 调用父类的方法
          console.log("child jump");
        }
      }
const child=new Child()
child.jump()

let teacher1 = new Teacher('zs', 18, '体育')
console.log(teacher1)

3. 闭包

指有权访问另一个函数作用域中变量的函数。闭包最大的作用就是用来 变量私有。延长变量的作用域范围。
变量私有可以理解为防抖函数的定时器，若不使用闭包定义在全局，将会有很多个定时器id变量，而利用闭包可以将定时器变量作为该函数内部的变量，不用重复定义。

浏览器的垃圾回收机制：
全局变量的声明周期会一直持续，直到页面卸载。
局部变量声明在函数中，它的声明周期从执行函数开始，直到函数执行结束，不再使用就会被销毁

 function fn1(){ // fn1 就是闭包函数
    var num = 10; 
    function fn2(){
      console.log(num); // 10 
    }
    fn2() 
  }
  fn1();

4. 防抖和节流

防抖就是在一定时间内只触发最后一次

function fn(){
    console.log(11);
}
function debounce(fun,delay){
    let timer =null
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer=setTimeout(() => {
            fun()
        }, delay);
    }
}
const db=debounce(fn,500)
db()
db()

节流是间隔时间内触发一次

function fn(){
    console.log(11);
}
function throttle(fun,delay){
    let timer =false
    return function(){
        if(timer)return 
         flag=true
         fun()
       setTimeout(() => {
           flag=false
        }, delay);
    }
}
const th=throttle(fn,500)
th()
th()

5. 深浅拷贝

5.1 浅拷贝

 // 浅拷贝只是拷贝一层，更深层次的对象级别的只拷贝引用
    const obj = {
      id: 1,
      name: "章三",
      msg: {
        age: 18,
      },
      color: ['red', 'green', 'yellow']
    };
    const newObj = {}
      // 1.for循环
    for(var key in obj){
      newObj[key] = obj[key]
    // }
    Object.assign(newObj,obj)
    newObj.msg.age = 20
    console.log(newObj);
    console.log(obj);

5.2 深拷贝

  const obj = {
      id: 1,
      name: "章三",
      msg: {
        age: 18,
      },
      color: ['red', 'green', 'yellow']
    };
    const newObj={}
    function deepCopy(newObj, oldObj){
        for(let key in oldObj){
            let item=oldObj[key];
            if(item instanceof Array){
                newObj[key]=[]
                deepCopy(newObj[key], item)
            }else if (item instanceof Object){
                newObj[key]={}
                deepCopy(newObj[key], item)
            }else{
                newObj[key]=item
            }
        }

    }
     deepCopy(newObj, obj);
      newObj.msg.age = 20;
      console.log(newObj);
      console.log(obj);
//2.
    let deepCopy = function (obj) {
      // 只拷贝对象
      if (typeof obj !== 'object') return;
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = obj instanceof Array ? [] : {};
      // 遍历obj，并且判断是obj的属性才拷贝
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 如果obj的子属性是对象，则进行递归操作,否则直接赋值
          newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
      }
      return newObj;
    }