js中面向对象编程

一、理解对象:

第一种：基于Object对象

var person = new Object();
person.name = ‘My Name‘;
person.age = 18;
person.getName = function(){
    return this.name;
}

第二种：对象字面量方式（比较清楚的查找对象包含的属性及方法）

var person = {
    name : ‘My name‘,
    age : 18,
    getName : function(){
        return this.name;
    }
}

JS的对象可以使用‘.’操作符动态的扩展其属性，可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下：

person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);

二、对象属性类型

ECMA-262第5版定义了JS对象属性中特征（用于JS引擎，外部无法直接访问）。ECMAScript中有两种属性：数据属性和访问器属性

1、数据属性：

数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：

[[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;

[[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;

[[Writable]]:表示是否可修改属性的值。默认true;

[[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,对该值的修改都反正在这个位置

要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。

如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）

var person = {};
Object.defineProperty(person, ‘name‘, {
    configurable: false,
    writable: false,
    value: ‘Jack‘
});
alert(person.name);//Jack
delete person.name;
person.name = ‘lily‘;
alert(person.name);//Jack

可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can‘t redefine non-configurable property）;

2、访问器属性：

它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：

[[Configurable]]:是否可通过delete操作符删除重新定义属性；

[[Numberable]]:是否可通过for-in循环查找该属性；

[[Get]]:读取属性时调用，默认：undefined;

[[Set]]:写入属性时调用，默认：undefined;

访问器属性不能直接定义，必须使用defineProperty()来定义，如下：

var person = {
    _age: 18
};
Object.defineProperty(person, ‘isAdult‘, {
    get: function () {
        if (this._age >= 18) {
            return true;
        } else {
            return false;
        }
    }
});
alert(person.isAdult?‘成年‘:‘未成年‘);//成年

从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；

此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：

var person = {};
Object.defineProperties(person,{
    _age:{
        value:19
    },
    isAdult:{
        get: function () {
            if (this._age >= 18) {
                return true;
            } else {
                return false;
            }
        }
    }
});
alert(person.isAdult?‘成年‘:‘未成年‘);//成年

上述代码使用Object.defineProperties()方法同时定义了_age及isAudlt两个属性的特性

此外，使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的特性：

var descriptor = Object.getOwnPropertyDescriptor(person,‘_age‘);
alert(descriptor.value);//19

对于数据属性，可以取得：configurable,enumberable,writable和value；

对于访问器属性，可以取得：configurable,enumberable,get和set

三、创建对象

使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法

1、工厂模式

function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.getName = function () {
        return this.name;
    }
    return o;//使用return返回生成的对象实例
}
var person = createPerson(‘Jack‘, 19, ‘SoftWare Engineer‘);

创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。

2、构造函数模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        return this.name;
    }
}

var person1 = new Person(‘Jack‘, 19, ‘SoftWare Engineer‘);

var person2 = new Person(‘Liye‘, 23, ‘Mechanical Engineer‘);

使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

  • 没有显式地创建对象
  • 直接将属性和方法赋值给this对象；
  • 没有return语句；

此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

  1. 创建一个对象
  2. 将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
  3. 执行构造函数的代码
  4. 返回该对象

上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象都继承Object，因此person1 instanceof Object也返回真：

alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;

虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = new Function () {//改写后效果与原代码相同，不过是为了方便理解
        return this.name;
    }
}
   上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到封装的效果，如下所示：
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
        return this.name;
}

3、原型模式

JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

function Person(){
}
Person.prototype.name = ‘Jack‘;//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
    return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法

原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个内部指针为：[[prototype]]指向原型对象。

实例属性或方法的访问过程是一次搜索过程：

  • 首先从对象实例本身开始，如果找到属性就直接返回该属性值；
  • 如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；

基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；

原型与in操作符

一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；

原生对象中原型

原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：

String.prototype.trim = function(){
    return this.replace(/^\s+/,‘‘).replace(/\s+$/,‘‘);
}
var str = ‘   word space   ‘;
alert(‘!‘+str.trim()+‘!‘);//!word space!

原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用同一个外部对象，所有实例对该对象的操作都会其它实例：

function Person() {
}
Person.prototype.name = ‘Jack‘;
Person.prototype.lessons = [‘Math‘,‘Physics‘];
var person1 = new Person();
person1.lessons.push(‘Biology‘);
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2

4、组合构造函数及原型模式

目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之所长。

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.lessons = [‘Math‘, ‘Physics‘];
}
Person.prototype = {
    constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
    getName: function () {
        return this.name;
    }
}
var person1 = new Person(‘Jack‘, 19, ‘SoftWare Engneer‘);
person1.lessons.push(‘Biology‘);
var person2 = new Person(‘Lily‘, 39, ‘Mechanical Engneer‘);
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法

在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！

 
5、动态原型模式

组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.lessons = [‘Math‘, ‘Physics‘];
}
if (typeof this.getName != ‘function‘) {//通过判断实例封装
　　Person.prototype = {
　　　　constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
　　　　getName: function () {
　　　　　　return this.name;
　　　　}　　}
}
var person1 = new Person(‘Jack‘, 19, ‘SoftWare Engneer‘);
person1.lessons.push(‘Biology‘);
var person2 = new Person(‘Lily‘, 39, ‘Mechanical Engneer‘);
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法
时间： 2024-10-13 12:30:36

js中面向对象编程的相关文章

JS的面向对象编程

//JS的面向对象编程 在这里,原型对象就是类,JS中一切都是类 使用构造函数定义类,再定义对象实例 This指针每个对象都有一个副本,在函数外可以访问,实现JAVA公有变量和成员变量功能 This包含在一个函数中,指代函数的调用者 Prototype可以使属性方法等重用,实现JAVA中函数和静态变量功能 For(var Key in person1){ person1[Key]; } Prototype不能调用私有变量和方法 对象冒充形式实现继承(多重继承) function Person()

笔记-[面向对象]-JS基于面向对象编程-[1]

面向对象(oop):是一种开发过程中,以面向对象的一种编程思维进行开发. 在JS中,我们一般采用的是面向过程的开发. 面向对象的特点:抽象.封装.继承.多态 先看看自定义对象如何写:自定义一个人的对象,人的名字,年龄,或者是说话.在下面,name age是这个人的属性,说话是这个人的一种行为,也可以叫方法.这样也可以理解为一个简单的面向对象的编程.对象从哪里来,如 var arr=new Array();这个就是一个数组的对象,它从js的一个内定的系统方法类来的. 例如:定义一个人的类,每一个人

笔记-[面向对象]-JS基于面向对象编程-[2]

下面是一个类定义私有属性的例子,和如何在类外部调用类内容的私有属性, <script type="text/javascript">var people=function(name,work,address){ var marry=1;//定义一个私有属性 marry  私有属性和私有方法在外部不可以直接调用访问 this.name=name; this.work=work; this.address=address; this.calls=function(){ aler

C#中面向对象编程机制之多态学习笔记

C#的多态性: 我的理解是:同一个操作,作用于不同的对象时,会有不同的结果,即同一个方法根据需要,作用于不同的对象时,会有不同的实现. C#的多态包括:接口多态,继承多态. 其中继承多态又包括通过虚拟方法实现的多态和通过抽象方法实现的多态性 例如:基类动物都有吃的方法,但是不同的动物吃的东西就会不一样,例如狼吃肉,羊吃草,这样"吃"的这个方法就要在派生类里面重新实现以下,运行时,通过指向基类的指针,来调用实现派生类中的方法. 接下来举例实现多态性. 1. 接口多态性 把动物"

C#中面向对象编程机制之继承学习笔记

继承反应了类和类之间的关系. 世界上很多事物都是有共性的,共性的那一部分我们就抽象为基类,用于派生其它类,这样提高了代码的复用性,使得代码的结构清晰易读,而且易于代码的扩展和维护. C#的继承只能继承自一个基类,这一点不同于C++的继承. C#的继承具有传递性,即B继承自A,C继承自B,则C具有A的所有特性. C#的继承隐式为public的. 假如不在派生类构造器中显示调用一个基类构造器,编译器会自动插入对基类的默认构造器的一个调用,然后才会执行派生类构造器中的代码, 如果基类没有默认的构造器,

关于java中面向对象编程的一点点小感悟！！！

断断续续接触java已经有半年的时间,当然中间也有过很多事情,不得已而中断了java的学习.当初刚刚接触到java的时候,总是不能理解java的面向对象编程优点.平常生活中我们做事情的思维方式都是面向过程的,就拿最简单的我要上一个培训班来说: 第一步:当然得是网上.贴吧.朋友的口中来了解这个辅导班,以此来决定是否需要上这个辅导班. 第二步:当然就是当了解完成之后,对这个辅导班比较满意.自己就需要做准备来达到辅导班的要求,比如说学费.复习知识,准备参加辅导班规定的考试. 第三步:当然就是付诸实践,

js中面向对象（创建对象的几种方式）

1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs.com/yuxingyoucan/p/5797142.html 一.创建对象的几种方式 javascript 创建对象简单的来说,无非就是使用内置对象或各种自定义对象,当然还可以使用JSON,但写法有很多,也能混合使用. 1.工厂方式创建对象:面向对象中的封装函数(内置对象) function cr

Web worker 与JS中异步编程的对比

0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何时alert"end"呢? 测试一下:答案是:永远都不会alert. 解析:JavaScript引擎是单线程的,事件触发排队等候.所有任务按照触发时间先后排队处理. 上例中,排队的顺序状态是: | var t=true ; | while(t){}; | alert('end'); | 在

JS 中面向对象的5种写法和拓展JS对象的写法

面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area()); //第2种写法 var Circle = function() {