1.闭包
1.1概念
一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域。
见到那来说就是:闭包=内层函数+外层函数的变量
上述的两个条件缺一不可
如下所示:
function outer(){
const a = 1
function f(){
console.log(a)
}
f()
}
outer()
如果内层函数未引用外层变量
则没有Closure,即不构成闭包
闭包的作用: 封闭数据、提供操作,外部也可以访问函数内部的变量
function outer(){
const i = 18
function f(){
console.log(i)
}
return f
}
let f1 = outer();
f1()
此时的f1()为:
闭包的引用:实现数据的私有
案例:统计一个函数的调用次数
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function count(){
let i = 0
function fn(){
i++
console.log('函数被调用了'+i+'次')
}
return fn
}
const f1 = count();
</script>
</body>
</html>
效果如下所示:
2.原型
2.1基本概念
JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称之为原型对象
这个对象可以挂载函数,对象实例化不会多次创建原型上的函数,节约了内存
因此可以将不变的方法,直接定义在prototype对象上,可以让所有对象的示例共享这些方法
未使用原型:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Star(uname,age) {
this.uname=uname
this.age=age
this.sing = function (){
console.log('唱歌')
}
}
const l = new Star('ldh',48);
const g = new Star('gfc',39);
console.log(l.sing === g.sing)//false
</script>
</body>
</html>
此时两个new出来的对象地址值不同,即内存为其开辟了两个空间来存储同一个方法,所以存在浪费内存的行为
使用原型后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Star(uname,age) {
this.uname=uname
this.age=age
}
Star.prototype.sing = function (){
console.log('唱歌')
}
const l = new Star('ldh',48);
const g = new Star('gfc',39);
console.log(l.sing === g.sing)
</script>
</body>
</html>
2.2constructor属性
每个原型对象都有个constructor属性(constructor–构造函数)
该属性指向该原型对象的构造函数,(让原型对象找到创建它的构造函数)
使用场景:如果有多个对象的方法,我们可以给原型对象采取对象的形式赋值
但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不在指向当前的构造函数了;此时,可以在修改后的原型对象中,添加一个constructor属性指向原来的构造函数。
<script>
function Star(uname) {
this.uname=uname
}
Star.prototype = {
sing:console.log('唱歌'),
dance:console.log('跳舞')
}
console.log(Star.prototype.constructor)
</script>
此时Star.prototype.constructor指向Object,而不是指向Star;
修改后:
<script>
function Star(uname) {
this.uname=uname
}
Star.prototype = {
constructor:Star,
sing:console.log('唱歌'),
dance:console.log('跳舞')
}
console.log(Star.prototype.constructor)
</script>
此时,Star.prototype.constructor就重新指回Star
2.3对象原型
如果打印Star.prototype,我们可以在浏览器上看到
这里的[[prototype]]就是对象原型
对象都有一个属性__proto__指向构造函数的prototype原型对象,之所以对象能够使用构造函数的prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在
注意:
2.4原型链
概念:基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联关系是一种链状的结构,所以将这种原型对象的链状结构关系称为原型链
2.5原型链的查找规则
①当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性
②如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)
③如果还没有,就查原型对象的原型(如上图中的Object的原型对象)
④依次类推一直找到Object为止(最终是null)
⑤__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者一条线路
⑥可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上