JS的面向对象编程的(闭包,作用域,原型链,封装,继承,多态)

闭包的概念
//=============================================================
闭包就是能够读取其他函数内部变量的函数。

1,变量的作用域无非就是两种:

全局变量和局部变量。

2,如何从外部读取局部变量?

  function f1(){
    n=999;
    function f2(){
      alert(n); // 999
    }
  }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构(chain scope),

子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1(){
    n=999;
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999

3,闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
请看下面的代码。

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

4,使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
//=============================================================
作用域

1,变量作用域

在JavaScript中全局变量的作用域比较简单,它的作用域是全局的,在代码的任何地方都是有定义的。然而函数的参数和局部变量只在函数体内有定义。另外局部变量的优先级要高于同名的全局变量,也就是说当局部变量与全局变量重名时,局部变量会覆盖全局变量

2,函数作用域

在JavaScript中变量的作用域,并非和C、Java等编程语言似得,在变量声明的代码段之外是不可见的,我们通常称为块级作用域,然而在JavaScript中使用的是函数作用域(变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的)。
//=============================================================
原型链

1、原型对象

在Javascript中,当系统加载构造函数后,会自动在内存中生成一个对象,这个对象就是原型对象。两者之间在内存中表现为相对独立,不存在谁包含谁的关系。但是两者之间又有一些关联,在构造函数的内部存在一个prototype属性指向原型对象,同时在原型对象的内存也存在一个属性constructor其指向了构造函数。

在这里插入图片描述
2、原型对象的作用

当构造函数实例化的对象访问一个不存在的属性或方法,系统会自动到当前构造器所指向的原型对象中去寻找,找到则直接使用。

在这里插入图片描述

3、原型对象的应用场景

在实际项目开发中,我们都会使用别人开发的Javascript类库,如果我们发现当前代码库不存在我们需要的属性或方法,我们不能直接去修改别人的源代码,又不想为每个实例化对象单独定义相关属性或方法,那么不妨考虑使用原型对象进行扩展。

//=============================================================
封装

通常写js组件开发的,都会用到匿名函数的写法去封装一个对象,与外界形成一个闭包的作用域。

1、使用函数有两步:

1.1,定义函数,又叫声明函数, 封装函数。
定义函数的三个要素:功能,参数,返回值。

function 函数名(形参){
函数代码
return 结果
}
1.2,调用函数
var 变量 = 函数名(实参);

2、对函数的参数和返回值的理解

2.1、函数的参数就是完成一件事情的已知条件,就是输入。

2.2、函数的返回值就是事情完成的结果。就是输出。

//=============================================================
继承

一、object()方法

json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。

function object(o) {    
    function F() {}    
    F.prototype = o;    
    return new F();  
}

二、浅拷贝

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

下面这个函数,就是在做拷贝:

function extendCopy(p) {    
    var c = {};    
    for(var i in p) {      
        c[i] = p[i];    
    }    
    c.uber = p;    
    return c;  
}

三、深拷贝

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

function deepCopy(p, c) {    
    var c = c || {};    
    for(var i in p) {      
        if(typeof p[i] === 'object') {        
            c[i] = (p[i].constructor === Array) ? [] : {};        
            deepCopy(p[i], c[i]);      
        } else {         
            c[i] = p[i];      
        }    
    }    
    return c;  
}

多态

面向对象编程中的多态性是能够创建具有多种形式的变量,函数或对象。

多态的实际含义是:
同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果
换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。从字面上来理解多态不太容易,下面我们来举例说明一下。
主人家里养了两只动物,分别是一只鸭和一只鸡,当主人向它们发出“叫”的命令时,鸭会“嘎嘎嘎”地叫,而鸡会“咯咯咯”地叫。这两只动物都会以自己的方式来发出叫声。它们同样“都是动物,并且可以发出叫声”,但根据主人的指令,它们会各自发出不同的叫声。
if和else if能实现简单的多态

对象的多态性

下面是改写后的代码,首先我们把不变的部分隔离出来,那就是所有的动物都会发出叫声:

var makeSound = function( animal ){
    animal.sound();
};

然后把可变的部分各自封装起来,我们刚才谈到的多态性实际上指的是对象的多态性:

var Duck = function(){}
Duck.prototype.sound = function(){
    console.log( '嘎嘎嘎' );
};

var Chicken = function(){}
Chicken.prototype.sound = function(){
    console.log( '咯咯咯' );
};

makeSound( new Duck() ); // 嘎嘎嘎
makeSound( new Chicken() ); // 咯咯咯

如果有一天又增加了一只狗,这时候只要简单地追加一些代码就可以了,而不用改动以前的makeSound 函数,如下所示:

var Dog = function(){}
Dog.prototype.sound = function(){
    console.log( '汪汪汪' );
};
makeSound( new Dog() ); // 汪汪汪

使用继承得到多态效果

使用继承来得到多态效果,是让对象表现出多态性的最常用手段。继承通常包括实现继承和接口继承。

JavaScript的多态

从前面我们得知,多态的思想实际上是把“做什么”和“谁去做”分离开来,要实现这一点,归根结底先要消除类型之间的耦合关系。如果类型之间的耦合关系没有被消除,那么我们在makeSound方法中指定了发出叫声的对象是某个类型,它就不可能再被替换为另外一个类型。在 Java 中,可以通过向上转型来实现多态。

而 JavaScript 的变量类型在运行期是可变的。一个JavaScript对象,既可以表示Duck类型的对象,又可以表示 Chicken 类型的对象,这意味着 JavaScript 对象的多态性是与生俱来的。

这种与生俱来的多态性并不难解释。JavaScript作为一门动态类型语言,它在编译时没有类型检查的过程,既没有检查创建的对象类型,又没有检查传递的参数类型。我们既可以往makeSound函数里传递duck对象当作参数,也可以传递 chicken 对象当作参数。

由此可见,某一种动物能否发出叫声,只取决于它有没有makeSound方法,而不取决于它是否是某种类型的对象,这里不存在任何程度上的“类型耦合”。在JavaScript中,并不需要诸如向上转型之类的技术来取得多态的效果。

多态:一个指令,多种状态(方式)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章