JavaScript高手转正学习(2)-原型的理解

时间: 2015-11-16 00:00 栏目: JavaScript 浏览: 6457 赞: 1 踩: 0 字体: 大中小

以下为本篇文章全部内容：

大家好，我叶子，接下来准备讲一讲 Js的原型和基于原型的一些扩展。

可能很多人多 JS的原型理解仅限于对 prototype 的扩展。

大家都知道我们的JS 中有字符串 String 数字 Number 数组 Array 对象 Object 等类型。

比如我们有时候会这样用

   var s='1a';
   alert(s.length);
   或者
   alert(s.toUpperCase());

那么这个 length 和 toUpperCase() 是从哪里来的？它不是字符串吗？怎么会有这些属性或者方法呢？
在看我们的PHP 字符串就是字符串一些符号的集合。并没有相应的方法或者属性。

当我们打印

console.dir(String.prototype);

发现这些属性都是来自这个String 中的 prototype
当然这个是 JS引擎为我们加上去的~~ 在我们的数据中凡是类型数据都会有这个属性 prototype 而这个属性是一个对象集合。
在js 中如果我们对类型的实例调用一个方法时！如果改实例数据中并没有对应的方法那么它将会去寻找这个 prototype 中是否有对应的方法。

这样当我们调用

s.toUpperCase()

时因为s本身是一种数据结构这个结构并不是对象而是一种内置的实例数据，所以也没有 toUpperCase() 方法可用，而这个方法就在 String的prototype 中。

那么如果说我们添加或者改变这个 prototype 如下

 String.prototype.sayhello=function(){
     alert(this+' '+'hello');
 }
 
 var s="wj008";
 s.sayhello();

我们将为这个字符串追加了一个方法；

我们还可以修改相应的方法如下

 //先保存原来的方法为旧的方法 否则 这个方法被覆盖了
 String.prototype.OldtoUpperCase  = String.prototype.toUpperCase; 
 String.prototype.toUpperCase=function(){
     alert(this.OldtoUpperCase()+' '+'hello');
 }
 
 var s="wj008";
 s.toUpperCase();

那么我们就可以知道要想在某类型的实例上获得相应的方法我们可以修改对应类型的 prototype 如我们有类型 Test

 function Test(){}
    Test.prototype.sayhello=function(){ alert('hello'); };
    var a=new Test();
    a.sayhello();
    
    var Test2=Test;
    var b=new Test();
    b.sayhello();
    
    var Test4;
    var Test3=Test4= function(){}
    Test3.prototype.sayhello=function(){ alert('匿名 hello'); };
    var c=new Test4();
    c.sayhello();

从上面的例子中我们可以看出修改改数据类型的原型可以达到为该类型数据添加方法属性的功效。

可是直接修改原型可能会对我们的编程照成相应的污染；

比方说上例

我们修改了 String.prototype.toUpperCase 会导致别人在使用这个 toUpperCase 时出现莫名其妙的错误。这个错误来自你修改后的 toUpperCase

所以一般直接修改原型看起来不是那么必要！可是原型操作在我们的JS又极为重要。

如何修改原型但不照成污染成为我们要重点讨论的问题。

为了解决这个问题我们想到可以从原来的类型中copy 他们的方法过来如下

function Base() {}
    
    Base.prototype.say1 = function () {
        alert(1);
    };
    function Test() {}
    
    Test.prototype.say2 = function () {
        alert(2);
    };
    for (var i in Base.prototype) {
        Test.prototype[i] = Base.prototype[i];
    }
    var a = new Test();
    a.say1();
    a.say2();
    var b = new Base();
    b.say1();
    b.say2(); //这里是会报错的因为 base 是没有 say2的

但是我们又会想其实 Base 的实例中也一样有和 Base.prototype 对应的方法

    function Base() {}
    
    Base.prototype.say1 = function () {
        alert(1);
    };
    function Test() {}
    
    Test.prototype.say2 = function () {
        alert(2);
    };
    var cb=new Base();
    
    for (var i in cb) {
        Test.prototype[i] = cb[i];
    }
    var a = new Test();
    a.say1();
    a.say2();
    var b = new Base();
    b.say1();
    b.say2(); //这里是会报错的

这样做一样达到效果而不同的是我们初始化了Base 一个实例而遍历其实例的方法，然而在一些情况下 new Base() 的时候 Base 应该不会有任何动作比如一些初始化动作，否则在构造Test方法的时候会多做一些Base初始化工作。

按照上面的思路我原本是要copy 对象的方法但是其实我们可以直接把 Test中的prototype 直接设置成 Base 的一个实例然后再为这个实例添加 say2 的方法如下

    function Base() {}
    
    Base.prototype.say1 = function () {
        alert(1);
    };
    function Test() {}
    Test.prototype=new Base();
    Test.prototype.say2 = function () {
        alert(2);
    };
    var a = new Test();
    a.say1();
    a.say2();
    var b = new Base();
    b.say1();
    b.say2(); //这里是会报错的

也可以这样做

    function Base() {}
    
    Base.prototype.say1 = function () {
        alert(1);
    };
    function Test() {}
    var baseobj=new Base();
    baseobj.say2 = function () {
        alert(2);
    };
    Test.prototype=baseobj;
    var a = new Test();
    a.say1();
    a.say2();
    var b = new Base();
    b.say1();
    b.say2(); //这里是会报错的

说到这里的时候可以有朋友会想到，可以利用原型来实现我们类似PHP的类继承。

(function(){
    function Base() {
        this.name='张三';
    }
    
    Base.prototype.say1 = function () {
        alert('say1:'+this.name);
    };
    function Test() {
         this.name='李四';
    }
    Test.prototype=new Base();
    Test.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    
    function Test2() {}
    Test2.prototype=new Test();
    Test2.prototype.say2 = function () {
        this.name='111';
        alert('say2:'+this.name);
    };
    var b1 = new Base();
    b1.say1();
    console.log(b1);
    
    var a1 = new Test();
    a1.say1();
    a1.say2();
    console.log(a1);
    var a2 = new Test2();
    
    a2.say2();
    a2.say1();
    console.log(a2);
 })();

这样的继承有两个缺点，第一在构造函数中我们无法实现构造参数第2 一个类要分内外两部分来完成。

为了实现构造函数很多人对此作出了很多办法如下：

(function(){
    function Base() {
        this.init=function(name){
            console.log(name);
            this.name='Base'+name;
        };
        this.init.apply(this,arguments);
    }
    
    Base.prototype.say1 = function () {
        alert('say1:'+this.name);
    };
    function Test() {
        this.init.apply(this,arguments);
    }
    
    Test.prototype=new Base();// 构造函数 init 处会输出 undefind
    Test.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    
    function Test2() {
         this.init.apply(this,arguments);
    }
    
    Test2.prototype=new Test(); // 构造函数 init 处会输出 undefind
    Test2.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    var b1 = new Base('张三');
    b1.say1();
    console.log(b1);
    
    var a1 = new Test('李四');
    a1.say1();
    a1.say2();
    console.log(a1);
    var a2 = new Test2('王5');
    
    a2.say2();
    a2.say1();
    console.log(a2);
 })();

在这种情况下由于继承要创建一个实例用于赋值给原型，所以会出现在构造函数中执行 this.init 这个方法。假如这个方法下面进行了HMTL元素操作显然不是我们需要的，那么我们就希望在赋值给原型时不要运行这个 this.init 方法。

1 判断参数数量

把上面的设置如下。

(function(){
    function Base() {
        this.init=function(name){
            console.log(name);
            this.name='Base'+name;
        };
       arguments.length==0 || this.init.apply(this,arguments);
    }
    
    Base.prototype.say1 = function () {
        alert('say1:'+this.name);
    };
    function Test() {
       arguments.length==0 ||  this.init.apply(this,arguments);
    }
    
    Test.prototype=new Base();
    Test.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    
    function Test2() {
        arguments.length==0 ||  this.init.apply(this,arguments);
    }
    
    Test2.prototype=new Test();
    Test2.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    var b1 = new Base('张三');
    b1.say1();
    console.log(b1);
    
    var a1 = new Test('李四');
    a1.say1();
    a1.say2();
    console.log(a1);
    var a2 = new Test2('王5');
    
    a2.say2();
    a2.say1();
    console.log(a2);
 })();

那么要求我们每次创建实例时必须传人参数否则我们需要手动运行 this.init() 并给定参数。

2 首参数类型判断

我们在继承的时候在创建对象之前把自身类型传入，如下：

(function(){
    function Base() {
        this.init=function(name){
            console.log(name);
            if(name){
                this.name='Base'+name;
            }
        };
       (arguments.length==1 && Base===arguments[0]) || this.init.apply(this,arguments);
    }
    
    Base.prototype.say1 = function () {
        alert('say1:'+this.name);
    };
    function Test() {
       (arguments.length==1 && Test===arguments[0]) ||  this.init.apply(this,arguments);
    }
    
    Test.prototype=new Base(Base);
    Test.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    
    function Test2() {
        (arguments.length==1 && Test2===arguments[0]) ||  this.init.apply(this,arguments);
    }
    
    Test2.prototype=new Test(Test);
    Test2.prototype.say2 = function () {
        alert('say2:'+this.name);
    };
    var b1 = new Base('张三');
    b1.say1();
    console.log(b1);
    
    var a1 = new Test();
    a1.say1();
    a1.say2();
    console.log(a1);
    var a2 = new Test2('王5');
    
    a2.say2();
    a2.say1();
    console.log(a2);
 })();

因为执行 this.init 的前提条件是第一个参数不恒等于类名，那么在后续实例中我们不在第一参数传入类名即可，也就是说如果第一个参数是本类类名的那么我们认为是用于继承的。

上面我们的继承已经可以基本实现，但是为了解决代码内外统一这个问题我们做了如下安排：

    (function () {
        //继承用的函数
        function Extends(func, base) {
            var temp = function () {
                (arguments.length == 1 && temp === arguments[0]) || this.init.apply(this, arguments);
            };
            console.log(base);
            if (typeof (base) === 'function') {
                temp.prototype = new base(base);
            }
            func.call(temp.prototype);
            return temp;
        }
        //构造Base类
        var Base = Extends(function () {
            //这里的this 是原型
            this.init = function (name) {
                console.log(name);
                if (name) {
                    //这里的this 实例对象本身
                    this.name = 'Base' + name;
                }
            };
            //这里的this 是原型
            this.say1 = function () {
                alert('say1:' + this.name);
            };
            
        });
        //构造Test 继承Base
        var Test = Extends(function () {
            //这里的this 是原型
            this.say2 = function () {
                alert('say2:' + this.name);
            };
        }, Base);
        
        //构造Test2 继承Test
        var Test2 = Extends(function () {
            this.say2 = function () {
                alert('Test2say2:' + this.name);
            };
        }, Test);
        var b1 = new Base('张三');
        b1.say1();
        console.log(b1);
        var a1 = new Test();
        a1.say1();
        a1.say2();
        console.log(a1);
        var a2 = new Test2('王5');
        a2.say2();
        a2.say1();
        console.log(a2);
    })();

然而我们看似已经成功了，可是在编程获取类名是却是这样的：

9F0VKE]I4}XZ0J2PCQHAK96.png
为了解决这个类名问题我们还需要一步

(function () {
        //继承用的函数
        function Extends(name,func, base) {
            eval(' var temp = function '+name+'() {(arguments.length == 1 && temp === arguments[0]) || this.init.apply(this, arguments);};')
            if (typeof (base) === 'function') {
                temp.prototype = new base(base);
            }
            func.call(temp.prototype);
            return temp;
        }
        //构造Base类
        var Base = Extends('Base',function () {
            //这里的this 是原型
            this.init = function (name) {
                console.log(name);
                if (name) {
                    //这里的this 实例对象本身
                    this.name = 'Base' + name;
                }
            };
            //这里的this 是原型
            this.say1 = function () {
                alert('say1:' + this.name);
            };
            
        });
        //构造Test 继承base
        var Test = Extends('Test',function () {
            //这里的this 是原型
            this.say2 = function () {
                alert('say2:' + this.name);
            };
        }, Base);
        var Test2 = Extends('Test2',function () {
            this.say2 = function () {
                alert('Test2say2:' + this.name);
            };
        }, Test);
        var b1 = new Base('张三');
        b1.say1();
        console.log(b1);
        var a1 = new Test();
        a1.say1();
        a1.say2();
        console.log(a1);
        var a2 = new Test2('王5');
        a2.say2();
        a2.say1();
        console.log(a2);
    })();

原型继承这种方法在一定情况下还是比较高效的，但是在操作上或者代码编排上感觉很多啰嗦的地方，而且稍微不注意可能会得到一些意想不到的结果。

未完待续...

上一篇： php时间计算几天几小时函数
下一篇： JavaScript高手转正学习(3)-定时器

网站统计

总赞数量：18241
总踩数量：128083
文章数量：28

sunny博客|讲述一个程序员的代码史记
新萄京娱乐

JavaScript高手转正学习(2)-原型的理解

以下为本篇文章全部内容：

1 判断参数数量

2 首参数类型判断

网站统计

www.2566.com_澳门新萄京2566_新萄京娱乐

www.2566.com_澳门新萄京2566_新萄京娱乐

sunny博客|讲述一个程序员的代码史记 新萄京娱乐

JavaScript高手转正学习(2)-原型的理解

以下为本篇文章全部内容：

1 判断参数数量

2 首参数类型判断

网站统计

www.2566.com_澳门新萄京2566_新萄京娱乐

www.2566.com_澳门新萄京2566_新萄京娱乐

sunny博客|讲述一个程序员的代码史记
新萄京娱乐