码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript初阶(六)-------- 继承发展史、命名空间

时间:2017-12-02 11:07:33      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:空间   console   属性   开发   发展史   查询   利用   过渡   --   

继承发展史

  继承发展史一共有四种形式,接下来让我们看看。

  1.传统形式

     Fir.prototype.lastName = "stg";
             function Fir() {
                 this.age = 25;
             }
             var fir = new Fir();
             Foo.prototype = fir;
             function Foo() { }
             var foo = new Foo();
             Person.prototype = foo;
             function Person() { }

  

  从代码中我们可以看出代码看起来很繁琐,不美观,而且继承起来很麻烦,所以这种形式一开始就out了。

 

        缺点:过多的继承了没用的属性。

  

  2.借助构造函数

      

             function Person1(name,age){ 
                    this.name = name;
                    this.age = age;
                }
                function Person2(name,age){
                    var pObj = Object.create(Person2.prototype);
                    Person1.call(pObj,name,age);
                    return pObj;
                }
                var person = new Person2(‘stg‘,23);

  

    这种方式本质上不叫继承,因为他是借用call和构造函数,把构造函数Person的this指向改变为自己而已,而且访问不了原型的原型。

  

      缺点:不能继承借用构造函数的原型,每次构造函数都要多走一个函数。

 

     3.共享原型

    

 function inherit(origin,target){
                    target.prototype = origin.prototype;
                }
                Person.prototype.lastName = "xiaoming";
                function Person(){ };
                function Son(){ }
                inherit(Person,Son);

   

      缺点:不能随意改动自己的原型。

 

  4.圣杯模式

      由于第三种方式中出现的不足,所以我会在中间加一个中间层作为过渡,这也就出现了第四种继承形式-------圣杯模式。

 function inherit(Origin,Target){
        function Func() { };
        Func.prototype = Origin.prototype;
        Target.prototype = new Func();
    }
    Person.prototype.lastName = "hhh";
    function Person () { }
    function Son() { }
    inhert(Person, Son);

    因为第三种形式中Person和Son的原型都是指向同一个原型,所以改变Person的原型就会是Son的原型发生改变,这里我们加入一个中间层函数Func过渡,让它的原型指向Origin的

原型,然后Target的原型继承它的原型,也就是相当于Target原型继承Origin的原型,这样Son改变的时候,Person的原型不会变。再有一点美中不足是,我们知道constructor属性指向的

是构造这个对象的函数,但是这时候son的constructor指向的是Person,因为Func函数里面没有constructor属性,于是便会随着原型链往上找,于是就找到了Person里面,这时候我们需

要手动地给son添加一个constructor属性。

   在开发的时候,我们需要一个叫超类(Uber)的东西,用来查询这个函数究竟是继承自谁。最终圣杯模式是这样的:

 function inherit(Origin,Target){
        function Func() { };
        Func.prototype = Origin.prototype;
        Target.prototype = new Func();
        Target.prototype.constructor = Target;
        Target.prototype.uber = Origin.prototype;
    }

  

  利用闭包的私有化变量,我们可以将圣杯模式写的更加高级一点

 

var inherit = (function () {
        var Func = function () { };
        return function (origin,target) {
        Func.prototype = Origin.prototype;
        Target.prototype = new Func() ;
        Target.prototype.constructor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}())//**********function与函数Func产生闭包

 

 


 

 

命名空间

      作用:管理变量,防止污染全局,适用于模块化开发

      在开发的时候,往往每个人用到的变量不同,团队开发时就会有变量冲突,我们可以用对象来解决,因为每个对象里面的东西都是独立的,互不干扰。

org = {
    person: {
        xiaoming : {
        age : 20,
        sex : "male"
        },
        xiaozhang : {
        age : 22,
        sex : "female"
        }
    }
}
var per1 = org.person.xiaoming.age;
var per2 = org.person.xiaozhang.age;

 

        采用对象来解决变量冲突问题是以前用的方法,现在我们可以用闭包来解决这一问题。

 

 var add = (function () {
                var count1 = 1;
                var count2 = 0;
                function myAdd(num1, num2){
                    count1 = num1;
                    count2 = num2;
                    console.log(count1 + count2);
                }
                return myAdd(count1,count2);
            }())

 

 

    类似于私有化变量来解决命名冲突,只有在于自己产生闭包的变量才能访问到。

 

JavaScript初阶(六)-------- 继承发展史、命名空间

标签:空间   console   属性   开发   发展史   查询   利用   过渡   --   

原文地址:http://www.cnblogs.com/sunshinehu/p/7941226.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!