之前一直都是用面向过程的方式编程,今天我们来看一下面向对象编程Javascript是一种基于对(object-based)的语言,在js中遇到的所有东西几乎都是对象,但是,js又不是一种真正的面向对象编程的语言,因为它的语法中没有class(类)。
下面我们一起来了解一下面向对象编程的基础知识:
一,生成对象的原始模式:
首先我们来选定一个对象人,假设他有名字和性别两个属性,用代码来表示为:
var person = { name: '', age: '' }
这就是一个原型对象,通过这个原型对象来生成两个实例对象。用代码来实现:
var person = {};// 创建一个空对象 person1.name = '小张';//按照原型对象的属性赋值 person2.age = 20; var cat2 = {}; cat2.name = "小李'"; cat2.age = 25;
给空对象赋值,生成两个实例,这是最简单的封装了,把两个属性封装在一个对象里面,这种方法虽然简单但是有很大的缺点,如果生成很多个实例的时候,一个一个写太麻烦,也无法看出实例与原型之间的联系,我们平时不采用这种方法。
二,对原始模式进行改进
所谓的改进就是通过函数解决代码繁琐重复的问题。
function person(name,age{ return { name:name, age:age } }
后面的name就是你要赋的值,然后通过调用函数来生成实例:
var person1 = person ('小张',20); var person2 = person ('小李',25);
这种方法同样存在问题,person1和person2之间没有任何内在的联系,不能反映出他们是同一个原型对象的实例。
三,构造函数模式
构造函数模式就是在其内部使用this变量,然后再用new运算符通过函数生成实例:
代码如下:
function person(name,age){ this.name=name; this.age=age; }
生成实例:
var cat1 = new person("小张",20) var cat2 = new person("小李",25); alert(cat1.name); // 小张 alert(cat1.color); // 小李
生成实例中,参数小张和小李分别赋值给this.name;参数20和25分别赋值给this.age
构造函数的方法同样存在一个问题,浪费内存,有些方法和属性是共有的我们可以不用每次都赋值,可以直接引用,下面的两个方法一个改进了这个问题,一个就解决了这个问题。
四:构造函数模式的问题
现在为person对象添加一个不变的属性eat,代码如下:
function Cat(name,color){ this.name = name; this.color = color; this.eat = function(){alert("吃饭");}; }
生成实例:
var cat1 = new Cat("小张",20); var cat2 = new Cat ("小李",25); cat1.eat(); // 吃饭
alert(cat1.eat == cat2.eat); //false因为两个实例的eat存在了不同的位置所以错
这个方法并没有测地解决这个问题,每次生成实例的时候eat里的内容都一样,这样也浪费内存,下面要介绍的这个问题就解决了这个问题,
五:prototype模式
js规定,每一个构造函数都有一个prototype属性,我们可以把那些不变的属性和方法直接定义在prototype对象上。
function person(name,age){ this.name = name; this.age = age; } Cat.prototype.eat = function(){alert("吃饭")};
然后生成实例person1和person2,这时:
alert(person1.eat == person2.eat); //true
因为两个实例的eat属性都是指向prototype对象,所以相等,可以与上个比较着理解.
以上就是面向对象的一些基础,要好好理解~