一、闭包
闭包是由什么构成
闭包=函数 词法作用域 词法作用域:即以变量声明定义的位置为参照,如果当前位置没有定义,就会访问父级定义的位置 广义上闭包: var a=1000; function fn1() { alert(a) } fn1() 平时工作中用到的闭包狭义上闭包: 1.函数内嵌套函数 2.子函数引用了父函数的相关变量 特点:长期驻留内存
闭包应用场景和实现代码
代码语言:javascript复制//求和
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;
}
}
})()
闭包优点和缺点
1.长期驻留内存,可以缓存数据 2.可以隔离作用域,避免全局污染
二、原型链
1、原型链是JS特有的一种继承机制 2、原型链会涉及到___proto___,prototype 3、原型链的顶端就是null 4、应用场景:继承 5、优点:把相同或类似的方法写在原型上,方便实例化对象复用 缺点:不好理解,通常只前端人才理解 6、ES6推出class extends来实现继承
世界级参考原型链图片没有之一:如下
三、JavaScript继承
1.继承是面向对象开发思想的特性之一
2.面试对象的三大特点:封装,继承,多态
3.继承主要分ES5和ES6的继承方式
ES5的继承–主要通过函数实现类
原型链继承
代码语言:javascript复制//创建一个父类
function Parent() {
this.name='jack'
}
Parent.prototype.getName=function() {
return this.name;
}
//创建一个子类
function Child() {
}
//子类的原型等于父类的实例化对象
Child.prototype=new Parent();
var c1=new Child()
缺点: 1.不能传参 没有解决对象引用问题
借用构造函数继承
代码语言:javascript复制//创建一个父类
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)
}
缺点:不能继承父类方法
组合继承=原型链继承 借用构造函数继承
代码语言:javascript复制//创建一个父类
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()
优点:即能继承父类的原型方法,也能传递参数属性
ES6继承
通过class,extends,super实现 //继承必须要写super
代码语言:javascript复制//创建一个父类
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() {
}
}