Javascript 基础 And 进阶

2019-11-22 本文已影响0人 chang_遇见缘

（一）

知识点：

原型链
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
    }
}

（二、js高级部分）

BOM部分
DOM事件
Promise和async/awiat
防抖与节流

BOM

浏览器的内核

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:Blink内核

Chrome:webkit

DOM事件

- DOM事件级别.png
  DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件

DOM的事件模型：捕获----> 冒泡

DOM的事件流（三个阶段）：捕获阶段---->目标阶段 -----> 冒泡阶段

DOM事件捕获的具体流程：

window---document---html---body---.... ---目标元素

DOM事件的Event对象的常见应用：

event.preventDefault() : 阻止默认事件
event.stopPropagation(): 阻止冒泡
event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
event.target: 返回触发事件的元素
event.currentTarget: 返回绑定事件的元素

DOM的自定义事件：

var  eve = new Event('eventName')
dom.addEventListener('eventName',function(){
})  //注册事件
dom.dispatchEvent(eve);   // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

Promise 和async/awiat

Promise的作用，promise如何进行多个数据的请求
Promise.all([p1, p2, p3]).then()

Promise.race([p1, p2, p3]) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝

var p3 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 500, "four"); 
});

Promise.race([p3, p4]).then(function(value) {
  console.log(value); // "three"
  // p3 更快，所以它完成了              
}, function(reason) {
  // 未被调用
});

4.async/awiat的错误处理

```js
async function f() {
  //  throw new Error('try again');
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
async function b() {
    try {
      await f();
    } catch(err) {
     console.log(err);
      b();
    }
}
b();    
```

防抖与节流

防抖(debounce):

就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。

<body>
 <button id="debounce">防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
  obtn.addEventListener('click',debounce,false); //监听绑定事件
 }
 //执行函数
 let timer
 function debounce() {
    clearTimeout(timer); 
    timer = setTimeout(function(){ 
        console.log('防抖，防抖，防抖');
  },300)
 }
 </script>
</body>

使用场景：当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6

节流（throttle）：
节流就是在一定时间间隔内触发一次事件

面试题目：

JavaScript代码中的‘use strict’是什么意思

说说你对amd和commonjs的理解

Commonjs是前端模块化的一种规范,同步加载模块,主要使用于服务器端模块化开发,目前使用该规范的有nodejs
AMD:是由commonjs衍生出来的用在浏览器端的异步模块加载规范,实现该规范的技术有require.js
CMD:同步模块加载规范，实现该规范的技术有sea.js