构造函数与工厂模式

工厂模式
function createJsPerson(name,age){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.writeJs = function(){
        console.log('my name is ' + this.name +'i can write js') 
    };
    return obj;
}
var p1 = createJsPerson('zzz',20);
p1.writeJs();
构造函数
//构造函数模式的目的就是为了创建一个自定义类,并且创建这个类的实例
function createJsPerson(name,age){
    //浏览器默认创建的对象就是我们的实例
    this.name = name;
    this.age = age;
    this.writeJs = function(){
         console.log('my name is ' + this.name +'i can write js') 
    }
}
var p1 = new createJsPerson('zzz',20);//createJsPerson--->this-->p1
p1.writeJs();//writeJs-->this-->p1
var res = createJsPerson('aaa',12) 
//这样写不是构造函数模式执行,而是普通函数执行
//由于没有写return所以res=undefined 
//createJsPerson-->this-->window
var p2 = new createJsPerson('zhang',18);
p2.writeJs();

构造函数模式的目的就是为了创建一个自定义类,并且创建这个类的实例
构造函数模式跟工厂模式的区别

1. 执行的时候

普通函数执行 ->createJsPerson()
构造函数执行 ->new createJsPerson()

创建数组
var ary = []; //字面量方式
var ary = new Array(); //实现创建的方式-->构造函数模式执行的方式
//不管哪一种方式ary都是Array这个类的一个实例
  • JS中的所有的类都是函数数据类型的,它通过new执行变成了一个类,但是它本身也是一个普通的函数
  • JS中所有的实例都是对象数据类型的
  • 在构造函数模式中,类中(函数体中)出现的this.xxx中的this是当前类中的一个实例
2.在函数代码执行的时候

相同:都是形成一个私有的作用域,然后形参赋值,预解释,代码从上到下执行

不同:在代码执行之前,不用自己手动的创建obj对象了,浏览器会默认的创建一个对象(这个对象其实就是我们当前类的一个实例)

接下来代码从上到下执行,以当前的实例为执行的主体(this代表的就是当前的实例),然后分别把属性名和属性值赋值给当前的实例,最后浏览器会默认的把创建的实例返回

3.p1和p2都是这个类的实例,所以都拥有writeJs这个方法,但是不同实例之间的方法是不一样的
//在类中实例增加的属性(this.xxx=xxx)属于当前实例的私有属性
//实例和实例之间单独的个体,所有私有的属性之间是不相等的
console.log(p1.writeJs === p2.writeJs);//false
构造函数模式的拓展
function Fn(){
    this.x = 100; //this-->f1
    this.getX = function(){
        //this-->需要看getX执行的时候才知道
        console.log(this.x);
    }
}
var f1 = new Fn;
f1.getX();//this-->f1
var ss = f1.getX;
ss()//this-->window undefined
  • 在构造函数中new Fn()执行,如果Fn不需要传递参数的话,后面的小括号可以省略
  • this的问题,在类中出现的this.xxx=xxx中this都是当前类的实例,而某一个属性值(方法),方法中的this需要看方法执行的时候,前面是否有“.”,才知道this是谁
function Fn(){
    var num = 10;
    this.x = 100;//f1.x = 100
    this.getX = function(){  //f1.getX = function
        console.log(this.x); 
    }
}
var f1 = new Fn;
console.log(f1.num);//undefined
//类有普通函数的一面,当函数执行的时候
//var num其实只是当前形成的私有作用域中的私有变量而已,它和我们的f1这个实例没有任何关系
//只有this.xxx=xxx才相当于给f1这个实例增加属性和方法,才和我们的f1有关系
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值