工厂方法、构造函数、原型对象——JS基础学习笔记（四）

案例一：使用工厂方法创建对象

function createPerson(name,age,gender){
    //创建一个新对象
    var obj = new Object();
    //向对象添加属性
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        alert(this.name);
    };
    //将新的对象返回
    return obj;
}

var obj2 = createPerson("猪八戒",28,"男");
var obj3 = createPerson("白骨精","16","女");
var obj4 = createPerson("蜘蛛精","18","女");

obj3.sayName();

构造函数的执行流程

1. 立刻创建一个新的对象
2. 将新的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。比如如下的Person和Dog就是两个类。

通过一个构造函数创建的对象叫做该构造函数的一个实例。

案例二：使用构造函数创建对象

function Person(name , age , gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function(){
        alert(this.name);
    };

function Dog(){
    
}
    
var per = new Person("孙悟空",18,"男");
var per2 = new Person("白骨精",16,"女");
var per3 = new Person("蜘蛛精",18,"女");

var dog = new Dog();

console.log(per);//Person……
console.log(dog);//Dog

//使用instanceof可以检查一个对象是否是一个类的实例，如果是则返回true。
console.log(per instanceof Person);//true

console.log(dog instanceof Object);//true所有通过构造函数创建的对象都是Object类的实例，都是true

关于this

1. 当以函数形式调用时，this是window
2. 当以方法形式调用时，谁调用this就是谁
3. 当以构造函数形式调用时，this就是新创建的那个对象。

构造函数的优化

//构造函数每执行一次就会创建一个新的sayName方法，也就是所有实例的sayName都是唯一的。这就导致构造函数每执行一次，就会创建一次方法。

function Person(name , age , gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = fun;
}
    
function fun(){
        alert("Hello大家好，我是:"+ this.name);
    }
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",16,"女");

console.log(per.sayName==per2.sayName);
//得出的结果是true，因为它两的值其实就是fun函数本身，而不是fun函数调用后的值。

原型对象

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用，prototype没有任何作用。

当函数以构造函数的形式被调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__prto__来访问该属性。

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，我们可以将对象中共有的饿内容，统一设置到原型对象中。

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

创建构造函数时，可以将那些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全剧作用域。

function MyClass(){
    
}

//向MyClass原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass原型中添加一个方法
MyClass.prototype.sayHello = function(){
    alert("hello");
};

var mc = new MyClass();

var mc2 = new MyClass();

//console.log(MyClass.prototype);
//console.log(mc2.__proto__ == MyClass.prototype);

//向mc添加a属性
mc.a = "我是mc中的a"；

//console.log(mc2.a);这里的结果就不是123了，因为mc2对象本身有一个a属性，所以不再向构造函数的原型对象查找

mc.sayHello();

function Person(name , age , gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    //this.sayName = fun;
}

//将sayName方法在全剧作用域中定义
/*将函数定义在全局作用域，污染了全局作用域的命名空间，而且也不安全*/

/* function fun(){
        alert("Hello大家好，我是:"+ this.name);
    }；*/
    
//向原型中添加sayName方法
Person.prototype.sayName = function(){
        alert("Hello大家好，我是:"+ this.name);
    }；
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",16,"女");
per.sayName();//Hello大家好，我是:孙悟空
per2.sayName();//Hello大家好，我是:猪八戒

console.log(per.sayName==per2.sayName);
//得出的结果是true，因为它两的值其实就是fun函数本身，而不是fun函数调用后的值。

toString方法

function Person(name , age , gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

//修改Person原型的toString
Person.prototype.toString = function(){
    return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
}

//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",16,"女");

//当我们直接在页面中打印一个对象时，实际上是输出的对象的toString()方法的返回值
//如果我们希望在输出对象时，不输出[object object],可以为对象添加一个toString()方法
/*per.toString = function(){
    return "我是一个快乐的人";
};*/

//var result = per.toString();
//console.log("result = " + result);
//console.log(per.__proto__.__proto__hasOwnProperty("toString"));
console.log(per);


console.log(per.sayName==per2.sayName);
//得出的结果是true，因为它两的值其实就是fun函数本身，而不是fun函数调用后的值。