浅析JavaScript的prototype

一、JavaScript对象的创建

(1)对象方法

        function Student(name){
            this.name=name;
            this.showName=function(){
                alert("my name is "+this.name);

            };
        }

调用showName方法:

new Student('a').showName();

对象方法的调用,类要生成一个实例,该实例可以调用该方法;

(2)类方法

        Student.showAge=function(){
            alert('age is 20');
        }

调用方式:

Student.showAge();

类方法相当于C#的静态方法,不需要new一个对象实例,可以直接调用;

(3)继承方法

        Student.prototype.sayHello=function Hello(){
            alert('hello');            
        }

调用方法:

new Student('a').sayHello();

原型方法一般用与继承父类的方法和方法共享;

(4)对象的字面量方式创建

        var p2={
            age:21,
            name:'jack',
            sayAge:function(){
                alert(this.age);
            }
        }

调用方法

p2.sayAge();

二、prototype的用法

(1)创建一个基类对象

        function baseClass(){
                this.name='jack';
                this.showMsg=function(){
                    alert('base');
                };
        }

(2)创建一个新的对象

function extendClass(){
            this.age=20;
        }

(3)新对象引用原型对象

extendClass.prototype=new baseClass();

(4)查看新对象

在此,我们可以看到extendClass继承了baseClass的属性和方法,在extendClass对象中可以调用baseClass的对象和方法;

三、调用原型对象中的方法;

如果当原型对象和本对象均有同名的方法和属性时,调用时会先调用本对象的方法和属性;

(1)原型对象

        function baseClass(){
                this.name='jack';
                this.showMsg=function(){
                    alert('base');
                };
        }

(2)新对象

        function extendClass(){
            this.age=20;
            this.name='rose';
            this.showMsg=function(){
                alert('extend');
            }
        }

(3)新对象继承原型对象

extendClass.prototype=new baseClass();

(4)调用对象的方法

通过结果我们可以看到,当新对象和原型对象都有同一个属性和方法时,会调用本对象的方法和属性,那么我们该如何调用原型对象的方法和属性呢

4.1  使用__proto__来调用

4.2 使用call来调用

new baseClass().showMsg.call(new extendClass())

将extendClass对象当做bassClass对象,来调用baseClass的对象方法

(5)call和apply的使用和区别

5.1 call和apply主要是用来改变函数运行时的上下文,他俩功能一致;但在参数传递时:call传递参数个数任意,apply传递参数是数组形式;

5.2 call和apply的运用

基础方法

        function Dog(name){
            this.name='dog';
            this.showName=function(){
                alert("name1:"+this.name);
            }
        }

新的对象

        function Fish(){
            this.name='fish';
        }

当Fish对象想要调用showName方法时,可用使用apply,或者call

              var dog=new Dog();
        var fish=new Fish();
        dog.showName.call(fish)
        dog.showName.apply(fish,[])    

四、小结

1、JavaScript是基于原型的语言,只有对象。
2、原型对象作为模板,新对象从中获得原始属性;任何对象都可以作为另一个对象的原型,从而允许后者共享前者的属性;
3、当向构造器函数的原型对象中添加新的属性,该属性将添加到从这个原型中继承属性的所有对象中。

五、参考链接

1、http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html

2、http://bbs.csdn.net/topics/390775296

原文地址:https://www.cnblogs.com/zqllove/p/5237971.html