JavaScript原型模式

一、提到原型模式，和构造函数关系密切，先讲一下它

    javascript没有类，通过函数来模拟实现类，用new来创建对象，函数内部的this指针来指向调用它的对象。

    事例中创建对象myGril，这个对象就获取了构造函数内this指向的所有属性和方法。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
        this.loseTemper=function(){
            return "When angry:"+this.temperament;
        }
    }
var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper()); //When angry:温柔

 

 

二、要是没有this的属性呢

通过new运算符创建的对象，只能访问this指向的属性和方法,实例中，myGirl只能访问temperament,lostTemper

temperament2无法访问。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
        this.loseTemper=function(){
            return "When angry:"+this.temperament;
        }
        var temperament2=temperament;
    }
var myGirl=new GirlFriend("温柔");
console.log(myGirl.temperament2);//undefined

 

三、讲了一大堆，和原型有什么关系呢？关键是构造函数内的方法，如果新建对象myGirl2 那么就会再创建一个lostTemper方法引用，对象建多了，对内存来说也是一种浪费，因为方法用的都是同一个，不像属性那样，每个对象都不同。这里就用到了原型对象，在构造函数的原型对象中添加一个这个方法，会使所有通过该构造函数创建的对象都具备该方法。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
    }
GirlFriend.prototype.loseTemper=function(){
            return "When angry:"+this.temperament;
    }
var myGirl=new GirlFriend("温柔");
 console.log(myGirl.loseTemper());

 

 

四、刚才看到原型对象上添加一个方法，要是把该构造函数的原型对象改变引用位置，也就是指向一个新对象呢。

下例中两个方法同样都能访问，那我们什么时候可以用呢？一定要确认构造函数的原型对象的所有属性和方法在哪后才能这样做，因为这已经改变了指向，要是有原型对象的其他方法创建过，就失效了，所以很危险。

    var GirlFriend=function (temperament) {
        this.temperament=temperament;
    }

GirlFriend.prototype={
            loseTemper:function(){
                return "When angry:"+this.temperament;
            },
            notLoseTemper:function(){
                return "When not angry:"+this.temperament;
            }
     }
    var myGirl=new GirlFriend("温柔");

console.log(myGirl.loseTemper());//When angry:温柔

console.log(myGirl.notLoseTemper());//When not angry:温柔

 

转载于:https://www.cnblogs.com/webWf/p/4727995.html