JavaScript--闭包和原型

最新推荐文章于 2024-01-12 14:37:37 发布

清木

最新推荐文章于 2024-01-12 14:37:37 发布

阅读量111

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58545784/article/details/131482472

版权

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属性是否出现在某个实例对象的原型链上