
1用new操作符创建对象
创建一个有名字和性别的人
var p1 = new Object();
p1.name = "blue";
p1.sex = "男";
p1.showName = function(){
alert("我的名字叫" + this.name);
}
p1.showSex = function(){
alert("我的性别是" + this.sex + "的");
}
p1.showName();
p1.showSex();
如果在创建一个叫red的人我们要复制上面的代码么?? 是不是太麻烦!那我们来一个简单的封装把!也就是工厂模式!
工厂模式:创建对象的3个步骤
1.原料 :创建一个函数 new 一个对象
2.加工:给对象添加上属性和方法。
3.返回整个对象
看代码
function createPerson(name, sex){
//1、原料
var obj = new Object();
//2、加工
obj.name = name;
obj.sex = sex;
obj.showName = function(){
alert("我的名字叫" + this.name);
}
obj.showSex = function(){
alert("我的性别是" + this.sex + "的");
}
//3、出厂
return obj;
}
var p1 = createPerson("blue","男");
p1.showName();// blue
p1.showSex();// 男
var p2 = createPerson("red", "女");
p2.showName();// red
p2.showSex();// 女
优点:你只要传入一个合法的参数就能得到自己想要的对象,你不必知道它创建对象的细节。
比较官方函数创建对象的方法已数组为例!
官方创建的函数和自己创建的函数的区别!官方创建的函数有new操作符!自己创建的函数没有new 操作符号!
alter(typeof Array) // function
var arr= new Array();
var arr1 = new Array(10,20,30);
var arr2 = new Array(40,50,60)
alter(arr1.push===arr2.push) // true
上面arr1.push===arr2.push 为true 说明两个不同的数组调用的是同一个push方法!
我们再看上个面的列子
function createPerson(name, sex){
//1、原料
var obj = new Object();
//2、加工
obj.name = name;
obj.sex = sex;
obj.showName = function(){
alert("我的名字叫" + this.name);
}
obj.showSex = function(){
alert("我的性别是" + this.sex + "的");
}
//3、出厂
return obj;
}
var p1 = createPerson("blue","男");
p1.showName();// blue
p1.showSex();// 男
var p2 = createPerson("red", "女");
p2.showName();// red
p2.showSex();// 女
console.log( p1.showName=== p2.showName) // false
这说明虽然说p1.showName和p2.showName虽然看着是一样的但是他们是两个不同的发个法!每一个被创建的对象都独有一套函数 浪费性能!
如何让创建对象的方法和官方的方法一样哪?就这来到构造函数创建对象啦!借助new操作符看代码!把第一步去掉 把obj改成this 去掉return
function Person(name, sex){
//1、原料
// var obj = new Object();
// this = new Object();
//2、加工
this.name = name;
this.sex = sex;
this.showName = function(){
alert("我的名字叫" + this.name);
}
this.showSex = function(){
alert("我的性别是" + this.sex + "的");
}
//3、出厂
// return obj;
//return this; 这个this是p1
}
var p1 = new Person("blue", "男");
p1.showName();
p1.showSex();
var p2 = new Person("red", "女");
p2.showName();
p2.showSex();
alert(p1.showName === p2.showName); //false
new运算符的作用
- 当前函数中的this指向新创建的对象.
- 自动完成1原料和3出场操作
这种通过new调用的函数叫做构造函数,构造函数可以构造对象。
注意构造函数一般首字母大写!在构造函数中this指向当前函数新创建的对象!
这个时候alert(p1.showName === p2.showName);//false
接下来我们解决函数不是共用一个方法的问题!我们还拿数组为例子!
创建两个数组给它们添加一个求和方法
var arr1 = [10, 20, 30, 40, 50];
var arr2 = [1, 2, 3, 4, 5];
arr1.sum = function(){
var res = 0;
for(var i = 0; i < this.length; i++){
res += this[i];
}
return res;
}
arr2.sum = function(){
var res = 0;
for(var i = 0; i < this.length; i++){
res += this[i];
}
return res;
}
alert(arr1.sum());
alert(arr2.sum());
alert(arr1.sum == arr2.sum);// false
虽然都能求和但是两个方法长得一样其实并不是一个!单独添加的是不同的函数 地址不一样最终用的是两套函数!
接下来看原型prototype
1原型是一个对象!概念每一个函数都有一个原型!一般用在构造函数上。我们可以给构造函数的原型prototype,添加方法。
2构造函数构造出来的对象共享原型上的方法
var arr1 = [10, 20, 30, 40, 50];
var arr2 = [1, 2, 3, 4, 5];
Array.prototype.sum = function(){
var res = 0;
for(var i = 0; i < this.length; i++){
res += this[i];
}
return res;
}
alert(arr1.sum());
alert(arr2.sum());
alert(arr1.sum == arr2.sum);true
接下来看上面自己写的构造函数!没有new 的问题已解决!现在解决每一个新创建出来的对象都独有一套函数!混合法创建对象。官方的构造函数1有new 2每一个创建出来的对象都独有一套函数!看下面混合法的代码!属性写在一起!共有的方法写在原型上!
//Person构造函数添加方法,添加在构造函数的原型上prototype
Person.prototype.showName = function(){
alert("我的名字" + this.name);
}
Person.prototype.showSex = function(){
alert("我的性别" + this.sex);
}
var p1 = new Person("blue", "男");
p1.showName();
p1.showSex();
var p2 = new Person("red", "女");
p2.showName();
p2.showSex();
alert(p1.showName === p2.showName); //true
构造函数在js中相当于其他语言中的类!通过构造函数可以创建对象!