6、js——创建对象方式
一、工厂方法创建对象(了解即可,用的不多)
<script type="text/javascript"> /* * 创建一个对象 */ var obj = { name:"孙悟空", age:18, gender:"男", sayName:function(){ alert(this.name); } }; //-------------------------------------------------------------------------- /* * 使用工厂方法创建对象 * 通过该方法可以大批量的创建对象 */ 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; } /* * 用来创建狗的对象 */ function createDog(name , age){ var obj = new Object(); obj.name = name; obj.age = age; obj.sayHello = function(){ alert("汪汪~~"); }; return obj; } var obj2 = createPerson("猪八戒",28,"男"); var obj3 = createPerson("白骨精",16,"女"); var obj4 = createPerson("蜘蛛精",18,"女"); /* * 使用工厂方法创建的对象,使用的构造函数都是Object * 所以创建的对象都是Object这个类型, * 就导致我们无法区分出多种不同类型的对象 */ //创建一个狗的对象 var dog = createDog("旺财",3); console.log(JSON.stringify(dog));//{"name":"旺财","age":3} console.log(JSON.stringify(obj4));//{"name":"蜘蛛精","age":18,"gender":"女"} </script>
二、构造函数
<script type="text/javascript"> /* * 创建一个构造函数,专门用来创建Person对象的 * 构造函数就是一个普通的函数,创建方式和普通函数没有区别, * 不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用,而构造函数需要使用new关键字来调用 * * 构造函数的执行流程: * 1.立刻创建一个新的对象 * 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象 * 3.逐行执行函数中的代码 * 4.将新建的对象作为返回值返回 * * 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。 * 我们将通过一个构造函数创建的对象,称为是该类的实例 * * this的情况: * 1.当以函数的形式调用时,this是window * 2.当以方法的形式调用时,谁调用方法this就是谁 * 3.当以构造函数的形式调用时,this就是新创建的那个对象 * */ 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("奔波霸",38,"男"); var dog = new Dog(); console.log(JSON.stringify(per));//{"name":"孙悟空","age":18,"gender":"男"} console.log(JSON.stringify(dog));//{} //------------------------------------------------------------------------------- /* * 使用instanceof可以检查一个对象是否是一个类的实例 * 语法: * 对象 instanceof 构造函数 * 如果是,则返回true,否则返回false */ console.log(per instanceof Person);//true console.log(dog instanceof Person);//false /* * 所有的对象都是Object的后代, * 所以任何对象和Object做instanceof检查时都会返回true */ console.log(dog instanceof Object);//true </script>
三、构造函数修改
<script type="text/javascript"> /* * * 创建一个Person构造函数 * - 在Person构造函数中,为每一个对象都添加了一个sayName方法,目前我们的方法是在构造函数内部创建的, * 也就是构造函数每执行一次就会创建一个新的sayName方法,也就是所有实例的sayName都是唯一的。 * 这样就导致了构造函数执行一次就会创建一个新的方法, * 执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的 * 这是没有必要的,完全可以使所有的对象共享同一个方法 * */ function PersonOne(name , age , gender){ this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function(){ alert("Hello大家好,我是:"+this.name); } } //创建一个Person的实例 var per = new PersonOne("孙悟空",18,"男"); var per2 = new PersonOne("猪八戒",28,"男"); per.sayName(); per2.sayName(); //------------------------------------------------------------------------------------ //那怎么办呢?试着将sayName方法在全局作用域中定义 function PersonTwo(name , age , gender){ this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = fun; } function fun(){ alert("Hello大家好,我是:"+this.name); }; //创建一个Person的实例 var per = new PersonTwo("孙悟空",18,"男"); var per2 = new PersonTwo("猪八戒",28,"男"); per.sayName(); per2.sayName(); /* * 可是将函数定义在全局作用域,污染了全局作用域的命名空间 * 而且定义在全局作用域中也很不安全 */ //------------------------------------------------------------------------------------ //那么可以怎么改呢?向原型中添加sayName方法 /** * 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中, * 这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了 */ function PersonThree(name , age , gender){ this.name = name; this.age = age; this.gender = gender; } //向原型中添加sayName方法 PersonThree.prototype.sayName = function(){ alert("Hello大家好,我是:"+this.name); }; //创建一个Person的实例 var per = new PersonThree("孙悟空",18,"男"); var per2 = new PersonThree("猪八戒",28,"男"); per.sayName(); per2.sayName(); </script>