首页 > > 网页制作 > Javascript >

从零开始学习前端JAVASCRIPT — 14、闭包与继承

2018-06-24 01:38:07来源：未知阅读 ()

一、闭包

1 . 概念：闭包就是能够读取其他函数内部变量的函数。在JS中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解为”定义在一个函数内部的函数”。

2 . 闭包的特点

1）可以读取函数内部的变量。

2）让这些变量的值始终保存在内存中。

3 . 闭包的原理

理解闭包，首先必须理解JS变量的作用域。变量的作用域无非就是两种(es5)：全局变量和局部变量。

JS语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，函数外部自然无法读取函数内的局部变量。

注意：

1）函数内部声明变量的时候，一定要使用var声明。如果不用的话，你实际上声明了一个全局变量。

2）局部变量的作用域，在函数定义的时候就已经确定下来了。

出于各种原因，我们有时候需要得到函数内部的局部变量。但是正常情况下这是办不到的。只有变通一下才能实现，那就是在函数内部再定义一个函数。外部变量不能访问内部变量，内部变量却能访问外部变量，这正是因为JS特有的”链式作用域”结构(chain scope)，子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量，对子对象都是可见的，反之则不成立。我们只需要把子函数返回出来，我们就可以在外部读取内部变量了。

4 . 闭包的应用场景

1）函数作为返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function f1() {
            var n = 999;
            nAdd = function () {
                n += 1;
            }
            function f2() {
                console.log(n)
            }
            return f2;
        }
        var result = f1();
        console.log("result的第一次执行")
        result();//999
        console.log("nAdd的执行")
        nAdd();//无输出
        console.log("result的第二次执行")
        result();//1000
    </script>
</body>
</html>

　　2）函数作为参数被传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m, n);
                }
            };
        }
        var a = fun(0); //undefined
        // 执行完并未销毁保存在内存中
        a.fun(1); //0
        a.fun(2); //0
        a.fun(3); //0

        fun(0).fun(1).fun(2).fun(3);
        //undefined、0、1、2
        var a = fun(0).fun(1); 
        //undefined、0
        a.fun(2); 
        //undefined、1
        a.fun(3);        
        //undefined、1
    </script>        
</body>
</html>

5 . 使用闭包注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包。否则会造成网页性能问题，在IE中可能导致内存泄漏。解决方法就是在函数退出之前，将不使用的局部变量删除（值置为null，垃圾回收机制就会处理）。

2）闭包会在父函数外部，改变父函数内部变量的值。所以不要随便改变父函数内部变量的值。

6 . demo通过js闭包实现鼠标滑过隔行换色的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包实现各行换色</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        h3{
            text-align: center;
            font-size: 24px;
            line-height: 60px;
        }
        .newList{
            width: 80%;
            margin: 0 auto;
            list-style: none;
        }
        .newList li{
            text-indent: 24px;
            line-height: 50px;
            font-size: 16px;
            border-top: 1px dashed #eeeeee;
        }
    </style>
</head>
<body>
    <h3>新闻列表</h3>
    <ul id="newList" class="newList">
        <li>这是第1条新闻</li>
        <li>这是第2条新闻</li>
        <li>这是第3条新闻</li>
        <li>这是第4条新闻</li>
        <li>这是第5条新闻</li>
        <li>这是第6条新闻</li>
        <li>这是第7条新闻</li>
        <li>这是第8条新闻</li>
        <li>这是第9条新闻</li>
    </ul>
</body>
<script type="text/javascript">
    var oNewList=document.getElementById('newList');
    var oNewListArr=Array.from(oNewList.children);
    oNewListArr.forEach(function (v,i) {
        // 隔行换色
        if(i % 2 === 0) {
            oNewListArr[i].style.background = '#f3f3f3';
        };
        //鼠标滑过改变背景色
        v.onmouseover=function () {
            this.style.background="#87ceeb";
        };
        //鼠标滑过恢复原背景色
        (function (m){
            oNewListArr[m].onmouseout=function () {
                if(m % 2 === 0) {
                    oNewListArr[i].style.background = '#f3f3f3';
                }
                else{
                    oNewListArr[i].style.background = '#ffffff';
                }
            }
        })(i);
    })
</script>
</html>

二、构造函数的继承

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new 运算符，就能生成实例，并且this变量会绑定在实例对象上。

详解new的执行过程：

在内存生成一个实例对象obj。
指定实例对象的__proto__到构造函数的prototype。
运行构造函数，相当于运行fn.call(obj)。
检查返回值，如果返回值为基本数据类型，则无视该返回值，而将生成的对象返回。如果为引用类型，则将该返回值返回。

构造函数很好用，但是存在浪费内存的问题。

JS规定，每一个构造函数都有一个prototype属性，指向另一个对象。此对象的所有属性和方法，都会被构造函数的实例继承。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
</head>
<body>    
</body>
<script type="text/javascript">
    //构造函数的命名首字母一般大写
    function Car(carlogo) {
        this.carLogo = carlogo;
        this.whistle = function () {
            console.log("正在鸣笛......")
        }
    }
    Car.prototype.run = function() {
        console.log("正在行走......")
    };
    var bmw=new Car("BMW");
    var audi=new Car("Audi");
    console.log("构造函数创建的实例：")
    console.log(bmw === audi)
    console.log(bmw,audi)
    console.log("构造函数whisle属性：")
    console.log(bmw.whisle === audi.whisle)
    console.log("原型run方法：");
    console.log(bmw.run === audi.run);

</script>
</html>

instanceof运算符：判断对象是不是构造函数的实例，是则true，否则false。

    console.log(bmw instanceof Car)//true
    console.log(bmw instanceof Array)//false

isPrototypeOf：判断prototype对象和某个实例之间的关系。

    console.log(Car.prototype.isPrototypeOf(bmw));//true
    console.log(Array.prototype.isPrototypeOf(bmw));//false

hasOwnProperty：每个实例对象都有一个hasOwnProperty方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

    bmw.hasOwnProperty('carlogo');//true
    bmw.hasOwnProperty('run');//false

in运算符：in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

console.log('run' in bmw);//true

注:

详解instanceof 运算符。 // 会沿着原型链查找。

详解hasOwnProperty方法。 // 不会沿着原型链查找。

详解isPrototypeOf方法。 // 会沿着原型链查找。

详解in运算符。 // 会沿着原型链查找。

三、call/apply继承

call和apply都是为了改变某个函数运行时的context即上下文而存在的，即改变函数内部this的指向。

Fn.call(obj, arg1, arg2 [, argN]);

fn,.apply(obj, [arg1, arg2,…, argN]);

作用相同，apply以数组的形式传参，call是以列表的形式。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
</head>
<body>    
</body>
<script type="text/javascript">
//构造函数
function Person(name) {
    this.name = name;
}

var xiaoJun = {
    name: '小军'
};

var xiaoHua = {
    name: '小花',
    sing: function (where, music) {
        console.log(this.name + '正在' + where + '唱' + music);
    }
};

xiaoHua.sing('马路上', '葫芦娃');
//列表形式传参
xiaoHua.sing.call(xiaoJun, '音乐厅', '屋顶');
//数组方式传参
xiaoHua.sing.apply(xiaoJun, ['KTV', '我们不一样']);
//列表形式传参，且与call、apply的执行方式不同，需要调用
var func = xiaoHua.sing.bind(xiaoJun);
func('教室', '荡起双桨');

</script>
</html>

apply和call实现继承：

将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
</head>
<body>    
</body>
<script type="text/javascript">
    function Animal () {
        this.eyes = 2;
    }
    function Dog(name) {
        Animal.call(this);
        this.name = name;
    }
    var oWangCai = new Dog('旺财');
    console.log(oWangCai);

</script>
</html>

四、prototype的概念

一切引用类型都是对象。
对象是属性的集合。
对象都是通过构造函数创建的。
每个函数都有一个prototype属性，即原型。对象都有__proto__属性，可以成为隐式原型。这个__proto__属性是一个隐藏的属性，JS并不希望开发者能够用到这个属性，有的低版本浏览器甚至不支持这个属性值。
每个对象的__proto__属性指向创建该对象的函数的prototype。
Object.prototype.__proto__指向null。

原型链：

访问一个对象的属性时，先在本地属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。

constructor属性：函数的prototype有一个constructor属性，该属性指向了函数本身。对象没有constructor属性，它沿着原型链使用的是对象的构造函数的constructor属性。

五、this的使用情况

1：构造函数(在new的情况下)

this指向的是新构建出来的对象。

2：函数作为对象的一个属性

函数中的this指向的是该对象。

3：函数call或者apply

当函数被call或者apply调用时，this的值就取传入对象的值。

4：全局函数 & 普通函数

全局函数或者普通函数中，this指向的是window。

5：在prototype原型对象中，this指向的是调用构造函数实例出来的对象。

注：this关键字的值在函数运行的时候才会被指定。

六、原型链的继承：

将一个构造函数的原型指向另一个构造函数的实例对象来实现继承。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型链继承</title>
</head>
<body>    
</body>
<script type="text/javascript">
function Person() {
    this.age = 0;
}

function Man() {
    this.beard = '胡子';
}

var person = new Person();
//改变man的原型指向
Man.prototype = person;
var man1  = new Man();
console.log(man1.beard);
console.log(man1.age);

</script>
</html>

原型链的继承必须将Man的prototype.constructor指向更改过来，否则它将会指向People，发生原型混乱。也就是下一点讲述的混合继承

七、混合继承：

原型链与构造函数的优点，组合而成的一个模式，即原型链继承方法，而在构造函数继承属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合继承</title>
</head>
<body>    
</body>
<script type="text/javascript">
function Person() {
    this.age = 0;
}

Person.prototype.introduce = function () {
    console.log('我有' + this.beard + '；今年' + this.age + '岁');
}

function Man() {
    Person.call(this);
    this.beard = '胡子';
}

var person = new Person();
console.log("prototype.constructor指向未改：")
Man.prototype = person;//改变函数原型指向
person.age = 1;
var man1  = new Man();
var man2 = new Man();
console.log(man1.age);
console.log(man2.age);

console.log("prototype.constructor指向改变：")
Man.prototype.constructor = Man;//改变构造函数指向
var man3  = new Man();
var man4 = new Man();
man3.age = 1;
console.log(man3);
console.log(man4);
man3.introduce();
man4.introduce();

</script>
</html>