JS 面向对象 编程设计

面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为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,//共享原型中定义方法




注：以上内容参考《JavaScript 高级程序设计》第3版
				


				
时间： 2024-10-05 12:31:28 

		


		


	

	
	

		


		
JS 面向对象 编程设计的相关文章


								

		

			

                简单粗暴地理解js原型链--js面向对象编程
			

		

		

									

				简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗			

		

	

				

		

			

                js面向对象编程：如何实现方法重载
			

		

		

									

				js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1			

		

	

				

		

			

                js面向对象编程：如何定义常量？
			

		

		

									

				js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get			

		

	

				

		

			

                js面向对象编程：两个小括号的使用
			

		

		

									

				在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("			

		

	

				

		

			

                js面向对象编程：this到底代表什么？
			

		

		

									

				在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){			

		

	

				

		

			

                js面向对象编程：如何检测对象类型
			

		

		

									

				在js中检测对象类型主要有三种,typeof,instanceof,constructor,这几种都可以检测对象的类型,但又有一定的区别.   1使用typeof检测对象类型. typeo作为最常用的检测类型的方法,返回字符串类型,具体使用如下: function testType(value) { var str=typeof(value); // alert(str); switch(str) { case 'undefined': // undefined类型 case 'object'			

		

	

				

		

			

                JavaScript强化教程-JS面向对象编程
			

		

		

									

				本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--JS面向对象编程  对事物的抽象描述  描述这类事物的特征和行为  对象是类的实例代码实现:创建一个类  function peple(){        this.hp=0;         this.act = 30;         this.name = "";         this.x=0;         this.y=0;         this.move =function(x,			

		

	

				

		

			

                js面向对象编程(二) 构造函数继承
			

		

		

									

				构造函数绑定 //基类建筑物var building = function () {    this.spec = "building";}; //address:房子地址,toward:房子朝向var house = function (address, toward) {    this.address = address;    this.toward = toward;}; //使房子继承建筑物 //使用call或者apply方法,将父对象的构造函数绑定在子对象上,在子对象构造			

		

	

				

		

			

                js面向对象编程：this到底代表什么？第二篇
			

		

		

									

				总认为自己弄明白了js中this的含义,this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个很奇怪的问题. 代码如下: //内部对象AutoCompleteInner function AutoCompleteInner(transformResultInner) { if(transformResultInner) { this.transformResultInner=transformResultInner; } } AutoComp