JavaScript高级(5)

最新推荐文章于 2022-06-07 00:53:12 发布

airar

最新推荐文章于 2022-06-07 00:53:12 发布

阅读量319

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/airar/article/details/120722915

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.闭包

1.1什么是「闭包」?什么是「闭包」?

var local="变量";

function foo(){

console.log(local);

}

</script>

假设上面三行代码在一个立即执行函数中

三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。好了这

就是一个闭包.

「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。

有的人认为闭包是需要函数套函数，然后 return 一个函数的。

比如这样：

function foo(){

  var local = 1;

  function bar(){

    local++;

    return local;

  }

  return bar;

}

var func = foo();

func();

上面代码中确实有闭包，local 变量和 bar 函数就组成了一个闭包（Closure）

1.2为什么有的人认为闭包是需要函数套函数呢？

是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就

是一个全局变量了，达不到使用闭包的目的——隐藏变量（等会会讲）

这也是为什么我上面要说「运行在一个立即执行函数中」

有些人看到「闭包」这个名字，就一定觉得要用什么包起来才行。其实这是翻译问题，闭包的原文

是 Closure，跟「包」没有任何关系

所以函数套函数只是为了造出一个局部变量，跟闭包无关

1.3为什么要 return bar 呢？

因为如果不 return，你就无法使用这个闭包。把 return bar 改成 window.bar = bar 也是一样的，只

要让外面可以访问到这个 bar 函数就行了

所以 return bar 只是为了 bar 能被使用，也跟闭包无关

1.4闭包的作用

闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」

假设我们在做一个游戏，在写其中关于「还剩几条命」的代码

如果不用闭包，你可以直接用一个全局变量：

window.lives = 30 // 还有三十条命

这样看起来很不妥。万一不小心把这个值改成 -1 了怎么办。所以我们不能让别人「直接访问」这

个变量。怎么办呢？

用局部变量

但是用局部变量别人又访问不到，怎么办呢？

暴露一个访问器（函数），让别人可以「间接访问」

代码如下：

function(){

  var lives = 50;

  window.奖励一条命 = function(){

    lives += 1;

  }

  window.死一条命 = function(){

    lives -= 1;

  }

}();

那么在其他的 JS 文件，就可以使用 window.奖励一条命() 来涨命，使用 window.死一条命() 来让

角色掉一条命

看到闭包在哪了吗？

var lives = 50; //变量

window.奖励一条命 = function(){

lives += 1;

} // 函数

「函数」和「函数内部能访问到的变量」

闭包是 JS 函数作用域的副产品

换句话说，正是由于 JS 的函数内部可以使用函数外部的变量，所以这段代码正好符合了闭包的定

义。而不是 JS 故意要使用闭包

很多编程语言也支持闭包，另外有一些语言则不支持闭包

只要你懂了 JS 的作用域，你自然而然就懂了闭包，即使你不知道那就是闭包！

1.5关于闭包的谣言

闭包会造成内存泄露？错

说这话的人根本不知道什么是内存泄露。内存泄露是指你用不到（访问不到）的变量，依然占居着

内存空间，不能被再次利用起来

闭包里面的变量明明就是我们需要的变量（lives），凭什么说是内存泄露？

这个谣言是如何来的？

因为 IE，IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。

这是 IE 的问题，不是闭包的问题。参见司徒正美的这篇文章

【https://www.cnblogs.com/rubylouvre/p/3345294.html】

2.原型和原型链

2.1原型

原型和原型链是JavaScript进阶重要的概念，尤其在插件开发过程中是不能绕过的知识点

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //原型
            var arr1=[1,0,2,2,4];
            var arr2=[1,0,0,7,6,9];
            arr1.sort(function(a,b){
                return a-b;
            });
            arr2.sort(function(a,b){
                return a-b;
            });
            alert(arr1);
            console.log(arr1);
            console.log(arr2);
            console.log(arr1===arr2); //false
            //数组arr1和数组arr2是俩不同的对象，但却用了公共的方法sort
            console.log(arr1.sort === arr2.sort);//true
        </script>
    </head>
    <body>
        
    </body>
</html>

本例子定义了2个数组arr1和arr2，并调用sort方法排序，当两个数组排序结束之后，分别输出这俩

数组的内容，控制台输出

arr1 ：[0, 1, 2, 2, 4]

arr2 ：[0, 0, 1, 6, 1, 7, 9]

我知道上诉两行输出并不会引起你的好奇和兴趣，所以这里我想让你把注意力集中输出的第3行和

第4行。这里用到JavaScript严格相等操作符===来判断arr1数组和arr2数组是否相等。显然的，

arr1和arr2是两个不同的数组，数组长度和元素都不一样，所以控制台输出false。第4行是判断arr1

对象和arr2对象的函数sort是否是同一函数，结果输出了true。如果你学过面向对象编程语言，如

C++/Java你会发现，这俩对象调用的不是实例方法，而是调用了类方法，什么意思呢？意思是数

组arr1和数组arr2是俩不同的对象，但却用了公共的方法，类似于Java中的static方法。

那么JavaScript是如何做到的呢？

var arr1=[1,0,2,2,4];

var arr2=[1,0,0,7,6,9];

数组求和方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var arr1=[1,0,2,2,4];
            var arr2=[1,0,0,7,6,9];
            arr1.getsum=function(){
                var sum=0;
                for(var i=0;i<this.length;i++){
                    sum+=this[i]
                }
                return sum;
            }
            console.log(arr1.getsum());//输出9
            console.log(arr2.getsum());//控制台报错 Uncaught TypeError: arr2.getsum is not a function
        </script>
    </head>
    <body>
        
    </body>
</html>

这个例子还是定义了2个变量arr1和arr2，我只在arr1上面定义了函数getSum()，正如所期望的，对

象arr1已经完成了数组的累和。但是变量arr2却报错，原因很简单，因为你的变量arr2没有

getSum()方法，那么有没有解决方案，函数只定义一次，然后提供给不同的变量使用呢？答案是有

的

例如：

var arr1 = [1, 0, 0, 8, 6];

var arr2 = [1, 0, 0, 8, 6, 1, 1];

//将getSum定义为原型方法

Array.prototype.getSum = function() {

         var sum = 0;

         for(var i = 0; i < this.length; i++) {

                  sum += this[i];

         }

         return sum;

}

console.log(arr1.getSum()); //控制台输出15

console.log(arr2.getSum()); //控制台输出17

解决方案就是将实例方法定义为原型方法Array.prototype.getSum，然后对象arr1和arr2就可以共享

getSum方法了。为了验证一下这俩对象是否调用了同一个方法，我们写测试代码如下：

console.log(arr1 === arr2); //false

console.log(arr1.getSum === arr2.getSum); //true

通过上面这个例子，我想你大概知道了JavaScript如何声明静态方法了，也知道第一个例子中为什

么两个不同如何定义公共方法了，那么这个prototype关键字是什么呢？它有什么用么？

prototype

在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到

实例中。在 JavaScript 中并不如此复制，而是在对象实例和它的构造器之间建立一个链接（它是

__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到

这些属性和方法

1.每个函数上面都有一个属性(prototype)指向了函数的原型对象(Person.prototype)

function Person() { }

console.log(Person.prototype);

即使你只定义了一个空函数，也存在一个prototype的属性。

例子尽管我们什么都不做，但是浏览器已经在内存中创建了两个对象：Person(函数)和

Person.prototype，其中，我们称Person为构造函数，因为我们后面要用到这个函数来new对象，

Person.prototype称为Person的原型对象，简称原型

现在我们给Person构造函数添加属性并使用new方式来创建一个Person()对象，看看浏览器内存发

生了什么？

function Person(name, age) {

         this.name = name;

         this.age = age;

}      

Person.prototype.showName = function() {

                          return this.name;

}

var p1 = new Person("SpringChang", 22);

console.log(p1.showName());

2.每个实例上面都有一个隐式原型(proto)指向了函数的原型对象，如本例子中的p1对象有一个隐

式原型也指向了Person.prototype对象

如图所示，Person构造函数有一个隐式属性prototype指向了他的原型对象Person.prototype，而p1

对象也有一个隐式属性__proto__指向了源性对象Person.prototype，而在原型上面我们定义了

showName方法

3. 实例访问属性或者方法的时候，遵循以为原则：

3.1如果实例上面存在，就用实例本身的属性和方法。

3.2如果实例上面不存在，就会顺着__proto__的指向一直往上查找，查找就停止

function Person(name, age) {
	this.name = name;
	this.age = age;
}	
Person.prototype.showName = function() {
	return "你调用的原型上面的方法";
}
var p1 = new Person("SpringChang", 22);
p1.showName = function() {
	return "你调用的是p2对象上面的方法";
}
console.log(p1.showName()); //输出：你调用的是p1对象上面的方法

var p2 = new Person("SpringChang", 22);
console.log(p2.showName()); //输出：你调用的原型上面的方法

结合图和代码可以看到，原型上面有showName方法，p1对象也有showName方法，那么这时候

p1调用的自身的showName方法，所以输出你调用的是p1对象上面的方法。而p2对象没有

showName方法，这时候会顺着p2对象的__proto__属性指向的原型找找看没有有没有showName

方法，结果找到了，则p2调用的原型上面的方法。如果原型上面也没有对应的方法呢？这时候它会

顺着原型的原型去找对应的方法，最终找到Object对象如果还没找到则报undefined，下面我们来

验证一下：

console.log(p1.showName === p2.showName); //false

console.log(p2.sex); //undefined

4.每个函数的原型对象上面都有一个constructor属性，指向了构造函数本身。

console.log(Person.prototype.constructor == Person); //true

由此，我们根据这4条规则绘制成了上述的关系图，这里我们可以看出Person的原型

Person.prototype有一个属性constructor又指向Person构造函数本身

2.1原型链

上面我们提到，对象在寻找某一属性时，如果自身属性没找到就去他对应的原型对象去找。若在原

型上面找到对应的属性则停止，否则继续去原型的原型找对应的属性，这样构成了一条原型链。上

一节中Person的原型其实还有一属性__proto__，他指向了上一级Object的原型对象。

console.log(Person.prototype.__proto__ === Object.prototype); //true

这时候来了一个Object对象，它是JavaScript的顶级对象，同样也有自己的原型Object.protoype，

这时候Person对象以及它的原型，Object对象已经对应的原型关系如下图所示。

将Object和Person联系起来的关键是Person.prototype的属性__proto__，它指向了

Object.prototype，它将两者打通，构成一个链式关系。同时你也看到Object的prototye也指向了

Object.prototype，所以console.log(Person.prototype.proto === Object.prototype)输出的额结果是

true

function Person(name, age) {
	this.name = name;
	this.age = age;
}	
Person.prototype.showName = function() {
	return "你调用的原型上面的方法";
}

var p1 = new Person("SpringChang", 22);
var p2 = new Person("CSDNER", 23);
p2.__proto__ = null;

console.log(p1.showName());
console.log(p2.showName());

现在我们打破了p1对象的原型，它原本指向的是Person的原型，现在我们让他指向null，则控制台

会报错

Uncaught TypeError: p2.showName is not a function

现在我们再构造另一个对象Animal，然后强制修改p2的原型链，让他指向Animal的原型。

function Person(name, age) {
	this.name = name;
	this.age = age;
}	
Person.prototype.showName = function() {
	return "你调用的原型上面的方法";
}

//定义另一个构造函数
function Aminal() {}

//在Aminal的原型上面定义方法speek方法
Aminal.prototype.showName = function(str) {
	return "我是Aminal的showName";
}

var p1 = new Person("SpringChang", 22);
var p2 = new Person("CSDNER", 23);
p2.__proto__ = Aminal.prototype; //将p2的__proto__指向Aminal的原型

console.log(p1.showName());  //你调用的原型上面的方法
console.log(p2.showName());  //我是Aminal的showName

从上面代码可以看到，p2的showName方法调用的Aminal原型上面的showName，而不再是

Person原型上面的showName，如果你还对p2的showName是不是真的是Aminal的showName心

存疑虑，那么再来验证一下吧

console.log(p2.showName() === Aminal.prototype.showName()); //true

一般来说，我们不建议手动去修改某个对象的原型，这会破坏掉原来的原型链。但是原型却是

JavaScript面向对象编程中相当重要的一个点，因为你可以利用它更好的封装一个类

1.每一个构造函数都有一个原型对象

2.构造函数名称.prototype属性就可以得到构造函数对应的原型对象

3.每一个原型对象中有2个属性constructor / __proto__

4.原型对象的constructor属性是用来得到原型对象对应的构造函数

5.原型对象的__proto__属性是用来得到原型对象的原型对象

6.Object.protoype顶级原型对象

7.可以通过构造函数创建出实例对象【new 构造函数()】

8.每一个实例对象都有一个 __proto__属性用来得到创建当前实例对象的构造函数对应的原型对

象

airar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级(5)

1.闭包1.1什么是「闭包」?什么是「闭包」?<script>var local="变量"; function foo(){ console.log(local); }</script>假设上面三行代码在一个立即执行函数中三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。好了这就是一个闭包.「函数」和「函数内部能访问到的变量...
复制链接

扫一扫