js基础之闭包与继承
【摘要】
一、闭包
闭包是由什么构成
闭包=函数+词法作用域
词法作用域:即以变量声明定义的位置为参照,如果当前位置没有定义,就会访问父级定义的位置
广义上闭包: var a=1000; func...
一、闭包
闭包是由什么构成
闭包=函数+词法作用域
词法作用域:即以变量声明定义的位置为参照,如果当前位置没有定义,就会访问父级定义的位置
广义上闭包: var a=1000; function fn1() { alert(a) } fn1()
平时工作中用到的闭包狭义上闭包:
1.函数内嵌套函数
2.子函数引用了父函数的相关变量特点:长期驻留内存
闭包应用场景和实现代码
//求和
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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
闭包优点和缺点
1.长期驻留内存,可以缓存数据
2.可以隔离作用域,避免全局污染
二、原型链
1、原型链是JS特有的一种继承机制
2、原型链会涉及到___proto___,prototype
3、原型链的顶端就是null
4、应用场景:继承
5、优点:把相同或类似的方法写在原型上,方便实例化对象复用
缺点:不好理解,通常只前端人才理解
6、ES6推出class extends来实现继承
世界级参考原型链图片没有之一:如下
三、JavaScript继承
1.继承是面向对象开发思想的特性之一
2.面试对象的三大特点:封装,继承,多态
3.继承主要分ES5和ES6的继承方式
ES5的继承–主要通过函数实现类
原型链继承
//创建一个父类
function Parent() {
this.name='jack'
}
Parent.prototype.getName=function() {
return this.name;
}
//创建一个子类
function Child() {
}
//子类的原型等于父类的实例化对象
Child.prototype=new Parent();
var c1=new Child()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
缺点:
1.不能传参
没有解决对象引用问题
借用构造函数继承
//创建一个父类
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)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
缺点:不能继承父类方法
组合继承=原型链继承+借用构造函数继承
//创建一个父类
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()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
优点:即能继承父类的原型方法,也能传递参数属性
ES6继承
通过class,extends,super实现 //继承必须要写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() {
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。
原文链接:jiangwenxin.blog.csdn.net/article/details/108375377
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)