深入理解对象

1.工厂模式 

/**
 * 工厂模式
 * 优点:可以批量创建实例
 * 缺点:无法区分种类,所有构造函数
 */
var say = function () {
    console.log(this.name);
    
    
}
var a = 10;
function Person(name,age,gender) {
    return{
        name:name,
        age:age,
        gender:gender,
        sayName:say,
    }
}
var p1 = Person('张三',12,'male');
var p2 = Person('李四',15,'female');
console.log(p1,p2);
p1.sayName();
p2.sayName();
console.log(p1.sayName===p2.sayName);

2.构造函数模式

/**
 * 2.构造函数模式
 * 优点:可以批量创建对象 可以区分种类
 * 缺点:方法冗余
 */
var sayName = function(){
    console.log(this.name);
    
}
function Person (name,age,gender) {
    /**
     * new关键字做了什么事情
     * 1.创建了一个构造函数实例 Person{}p1 p2
     * 2.将this指向构造函数实例 p1 p2
     * 3.执行函数体内的代码
     * 4.返回实例 p1 p2
     */
    this.name = name;
    this.age = age;
    this.gender = gender;
    var sayName = sayName;
    
}
var p1 = new Person('terry',18,'male');
var p2 = new Person('jennie',28,'female');

console.log(p1,p2);

 3.原型模式 

/**
 * 3.原型模式(不单独使用
 * 构造函数什么事情都不做
 * 将所有实例属性和方法全部放在原型对象中
 */
function Person () {}
    Person.prototype.name = 'ronda';
    Person.prototype.age = 18;
    Person.prototype.gender = 'female';
    Person.prototype.sayName = function () {
        console.log(this.name);
        
    };
    Person.prototype.friends=[];
    var p1 = new Person();
    var p2 = new Person();
    console.log(p1,p2,p1.name,p2.name,p1.sayName === p2.sayName);
    p1.sayName();
    p2.sayName();
    p1.friends.push('tom');
    console.log(p1.friends,p2.friends);

4.组合模式

    /**
     * 组合模式
     * 原型模式 + 构造函数模式
     * 将实例公共属性和公共方法放在原型对象中
     * 将实例私有属性和私有方法放在构造函数中
     */
    function Person(name,age,gender,weight) {
        //将实例的私有属性和方法放在构造函数中
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.weight = function(){
            console.log(weight);
            
        }
    }
    Person.prototype.type = 'Person实例';
    Person.prototype.sayName = function(){
        console.log(this.name);
        
    }
    var p1 = new Person('terry',18,'male','40kg');
    var p2 = new Person('lerry',30,'female','60kg');
    console.log(p1,p2);
    p1.weight();
    p2.weight();
    console.log(p1.weight===p2.weight);
    console.log(p1.type,p2.type,p1.type===p2.type);
    p1.sayName();
    p2.sayName();
    console.log(p1.sayName===p2.sayName);

你可能感兴趣的:(javascript,前端,vue.js)