第一部分:
首先,可以用字典创建一个简单对象,
var cat= {
name : 'jack',
age : '5',
friends : [ ' one cat ' , ' two cat ' ],
run : function(){ console.log("cat is run") ;},
eat : function(){ console.log(" cat is eat") ;}
}
现在用Json的键值对构建了一个最简单的对象。
如果要使用这个对象中的变量和函数,只需要按照json的使用规则来运行就可以了。
console.log(cat.name);
console.log(cat.age );
car.run;
car.eat;
在对象中,我们称变量为对象的属性,而函数称之为方法。(猫在现实中是一个动物的种类,而只有在定义了具体的属性后,才能有一个具体对象,对象的属性可以有,姓名、年龄、等值,猫可以有跑的方法,吃的方法等。)
类是对象的抽象,我们把拥有四肢,会瞄叫的这种动物抽出他们的共有特征,归为猫类,
对象是类的实例,而如果养了一只猫叫jack,这是具体化的一只猫。
第二部分:
我们用json创建了一个对象,但这个对象,不便于封装和引用,为了方便起见,对json构成的对象做基本的改进,以便我们调用。既然能后调用,而又能很好的封装的,可以是选择用一个函数;这种方式称为工厂方式构造对象。
function cat(name,age,friends ){ //构造函数
var obj = new Object();
obj.name= name;
obj.age = age;
obj.friends= friends;
obj.run = function(a){
console.log(this.name + ' run ' + a);};
obj.eat = function(b){
console.log(this.name + ' eat ' + b);};
return obj;
}
```
我们用函数构造出了一个对象,new是创建对象的关键字。为这个对象新建了属性和方法。追后用return返回了对象obj。
object()可以用来配合new定义一个空白的对象。然后可以在上面添加属性和方法。
需要注意的是,在函数内部构建对象的时候,new关键字后面必须要大写才能够正确编译,否则会出现报错现象。
在引用对象的时候,我们只需要在函数写入实参后,就可以调用其中的属性和方法;
var cat_jack = cat('jack', '5',['cat_one','cat_two' ]);
cat_jack.run('round');
cat_jack.eat('milk');
用函数改进后的对象已经能够足够方便的创建出新的对象来,但是new关键字被写入了函数内部,我们应该将new关键字提取出来,
###第三部分
我们取消了在函数内部用new关键字构造出来的对象,然后用this来将原来的obj对象替换一下。然后把返回值取消。就创造出了一个构造函数。
取消return和在函数内部的new对象后,只保留属性和方法。
>所谓"构造函数",其实就是一个普通函数,但是内部使用了[this变量](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
this:可指当前的方法属于谁,在函数前面有new的情况下失效。 全局函数是window的方法,但是在前面加new以后 ,会在函数中自动新创建一个对象,并指向该对象。构造函数和普通函数区别在于调用前加new。
function cat(name,age,friends ){
this.name= name;
this.age = age;
this.friends= friends;
this.run = function(a){
console.log(this.name + ' run ' + a);};
this.eat = function(b){
console.log(this.name + ' eat ' + b);};
}
然后我们用新的对象来调用这个构造函数,既很容易创造出了一个对象。
var cat_jack = new cat('jack', '5',['cat_one','cat_two' ]);
cat_jack.run('round');
cat_jack.eat('milk');
###第四部分
在构造函数中,由于对形参传递参数的不确定和不便于书写,可以对参数用json数组进行抽取,
function cat(option ){
this.name= option.name;
this.age = option.age;
this.friends= option.friends;
this.run = function(a){
console.log(this.name + ' run ' + a);};
this.eat = function(b){
console.log(this.name + ' eat ' + b);};
}
然后新建对象时,将传递实参修改为json格式。
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
###第五部分
重新构建出来的对象的确可以正常运行,但是任然会存在美中不足的地方,在对象调用方法的时候,我们创建两个对象。cat_jack和 cat_maria 。
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');
测试被调用的同一个方法后,输出值为false。原因就在于创建一个函数的时候同时也创建一个新的对象,每一次使用new,都会创造出一个新的对象。
``` alert(cat_jack.eat == cat_maria.eat);```
这样并不利于性能的提升,为了改进这一点,需要引出原型的定义。
prototype:让我们有能力向对象添加属性和方法,它的作用就是构造函数的一个共享库;所有数据将来都会被所有的新对象公用。
###第六部分
将构造函数中的方法提取出来,另外单独使用原型设置;
function cat(option ){
this.name= option.name;
this.age = option.age;
this.friends= option.friends;
}
cat.prototype={
run : function(a){ console.log(this.name + ' run ' + a);},
eat : function(b){ console.log(this.name + ' eat ' + b);}
}
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');
然后用alert(cat_jack.eat == cat_maria.eat)测试,得出的结果为true。
###第七部分
基本原理基本实现后,还可以对构造函数进一步简化,使用json抽取出参数,然后将属性和方法,使用json进行简单合并。
function cat(option){
this._init(option);
}
cat.prototype={
_init : function(option)
{
var option=option||{};
this.name= option.name;
this.age = option.age;
this.friends= option.friends },
run : function(a){ console.log(this.name + ' run ' + a);},
eat : function(b){ console.log(this.name + ' eat ' + b);}
}
var cat_jack = new Cat({name:'jack', age:'5',friends:['cat_one','cat_two' ]});
cat_jack.run('round');
cat_jack.eat('milk');
var cat_maria = new Cat({name:'maria', age:'3',friends:['cat_one','cat_two' ]});
cat_maria.run('road');
cat_maria.eat('meet');