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