A technical note of how to answer, or your understanding of xxxx
For example: Tell me about your understanding of closures
Answer: 1. What is xxx
2. Application scenarios
3. Advantages and disadvantages
4. Implementation
5. Is there a better solution!
One, closure
What is a closure
Closure = function + lexical scope
Lexical scope: refer to the position defined by the variable declaration, if the current position is not defined, the position defined by the parent will be visited
Closure in a broad sense: var a=1000; function fn1() {alert(a)} fn1()
Closures used in daily work, narrow upper closures:
1. Nested functions within functions
2. Child functions refer to related variables of the parent functionFeatures: long-term resident memory
Closure application scenarios and implementation code
//求和
function makeAdd(x) {
return function(y) {
return x+y
}
}
//设置字号
function setFontSize(size) {
return function() {
document.body.style.fontSize=size+"px"
}
}
//循环表单
function makeHelp(help) {
return function() {
console.log(help)
document.querySelector('.help').innerHTML=help
}
}
function init() {
var userInfo=[
{
id:'username',helpText:'请输入用户名'},
{
id:'email',helpText:'请输入邮箱'},
{
id:'address',helpText:'请输入地址'},
]
//动态绑定onfocus事件
for(var i=0;i<userInfo.length;i++) {
var item=userInfo[i];
document.getElementById(item.id).onfocus=makeHelp(item.helpText)
}
}
init()
//封装组件或插件
var Counter=(function() {
//私有变量
var index=0;
//私有方法
var add=function() {
return index++;
}
var jian=function() {
}
return {
//暴露出去供用户的方法
increment:function() {
add()
},
getValue:function() {
return index;
}
}
})()
Advantages and disadvantages of closures
1. Long-term resident memory, can cache data
2. Can isolate the scope, avoid global pollution
Second, the prototype chain
1. The prototype chain is a unique inheritance mechanism of JS
2. The prototype chain will involve ___proto___, prototype
3. The top of the prototype chain is null
4. Application scenarios: inheritance
5. Advantages: write the same or similar methods in the prototype Above, it is convenient to reuse instantiated objects.
Disadvantages: it is not easy to understand, usually only front-end talents understand.
6. ES6 launched class extends to realize inheritance of
world-class reference prototype chain. There is no picture: as follows
Three, JavaScript inheritance
1. Inheritance is one of the characteristics of object-oriented development thinking
2. Three characteristics of interviewees: encapsulation, inheritance, polymorphism
3. Inheritance is mainly divided into ES5 and ES6 inheritance methods
ES5 Inheritance-Classes are mainly implemented through functions
Prototype chain inheritance
//创建一个父类
function Parent() {
this.name='jack'
}
Parent.prototype.getName=function() {
return this.name;
}
//创建一个子类
function Child() {
}
//子类的原型等于父类的实例化对象
Child.prototype=new Parent();
var c1=new Child()
Disadvantages:
1. Can not pass parameters,
does not solve the object reference problem
Borrowing constructor inheritance
//创建一个父类
function Parent(name) {
this.name=name ||'jack'
this.colors=['red','green','blue']
}
Parent.prototype.getName=function() {
return this.name;
}
//创建一个子类
function Child(name) {
//借用父类来承继实例属性，但不能继承父类方法
Person.call(this,name)
}
Disadvantages: cannot inherit the parent class method
Combination inheritance = prototype chain inheritance + borrow constructor inheritance
//创建一个父类
function Parent(name) {
this.name=name ||'jack'
this.colors=['red','green','blue']
}
Parent.prototype.getName=function() {
return this.name;
}
var p1=new Parent();
p1.getName();
//创建一个子类
function Child(name) {
Parent.call(this,name)
}
Child.prototype=new Parent();
var c1=new Child()
c1.getName()
Advantages: not only can inherit the prototype method of the parent class, but also pass parameter attributes
ES6 inheritance
Through class, extends, super implementation // inheritance must write super
//创建一个父类
class Parent {
constructor(name) {
this.name=name ||'jack'
this.colors=['red','green','blue']
}
getName() {
return this.name;
}
}
//创建一个子类
class Child extends Parent {
constructor(name) {
super(name) //super就是父类Parent
}
getValue() {
}
}