（一）
知识点：
-
原型链
-
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
网友评论