欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ECMAScript对象基础

程序员文章站 2024-01-12 09:33:52
...
 1.Global对象。这对象之所以特别就是因为它根本不存在!-_-。如果你声明
var pointer=Global;
报错,找不到此对象。这是因为在ECMAScript中,每个函数都某个对象的方法,我们用到的isNaN(),isFinite(),parseInt()和parseFloat()函数,看起来是独立的函数,其实它们都是Global对象的函数。
需要注意两个用于处理url编码的函数:

1)encodeURI()和decodeURI()  处理完整的uri
2)encodeURIComponent()和decodeURIComponent()     处理片段

2.其他对象如Array,Math,Date对象,我发现比较有趣的是Array的处理方式与ruby中Array的处理方式几乎一样。

3.ECMAScript对象的创建方式:
1)工厂方式:

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby function showColor()ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby   alert(
this.color)
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
function createCar(sColor, iDoors, iMpg) ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
var oTempCar = new Object;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     oTempCar.color 
= sColor;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     oTempCar.doors 
= iDoors;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     oTempCar.mpg 
= iMpg;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     oTempCar.showColor 
=showColor;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
return oTempCar;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar1 = createCar("red"423);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar2 = createCar("blue"325);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 

这样的方式看起来很奇怪,好象方法showColor()不是对象的方法

2)构造函数方式:

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby function Car(sColor, iDoors, iMpg) ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.color = sColor;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.doors = iDoors;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.mpg = iMpg;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.showColor = function () ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby         alert(
this.color)
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     }
;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar1 = new Car("red"423);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar2 = new Car("blue"325);


这样的方式有个新问题,那就是每次构造一个对象都将重复生成函数showColor,为每个对象创建独立的函数版本。

3)原型方式

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby function Car() ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.color 
= "red";
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.doors 
= 4;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.mpg 
= 23;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.drivers 
= new Array("Mike""Sue");
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.showColor 
= function () ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     alert(
this.color);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }
;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar1 = new Car();
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar2 = new Car();
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby oCar1.drivers.push(
"Matt");
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby alert(oCar1.drivers);    
//outputs "Mike,Sue,Matt"
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
alert(oCar2.drivers);    //outputs "Mike,Sue,Matt"


利用对象的prototype属性来构造对象,但是有两个问题:没办法使用构造函数传参来生成对象;函数虽然被不同对象共享,但是属性竟然也被共享,比如上面代码中,oCar1的drivers属性与oCar2的drivers属性是同一个Array对象。

4)为了解决上面问题,我们引入了构造函数/原型的混合方式:
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby function Car(sColor, iDoors, iMpg) ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.color = sColor;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.doors = iDoors;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.mpg = iMpg;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.drivers = new Array("Mike""Sue");
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby Car.prototype.showColor 
= function () ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     alert(
this.color);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }
;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar1 = new Car("red"423);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar2 = new Car("blue"325);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby oCar1.drivers.push(
"Matt");
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby alert(oCar1.drivers);    
//outputs "Mike,Sue,Matt"
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
alert(oCar2.drivers);    //outputs "Mike,Sue"


属性通过构造函数方式,而函数则通过原型来生成,这就避免了纯粹原型方式带来的问题。但是函数放在对象的构造函数定义,让习惯java,c++的人也感觉不爽,对象为什么不能放在一块地方定义呢?这就引出来了动态原型方式

5)动态原型方式:
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby function Car(sColor, iDoors, iMpg) ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.color = sColor;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.doors = iDoors;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.mpg = iMpg;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
this.drivers = new Array("Mike""Sue");
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     
if (typeof Car._initialized == "undefined"ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby         Car.prototype.showColor 
= function () ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby {
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby             alert(
this.color);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby         }
;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby         Car._initialized 
= true;
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby     }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby }

ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar1 = new Car("red"423);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 
var oCar2 = new Car("blue"325);
ECMAScript对象基础
            
    
    博客分类: web开发 prototypeRuby 

通过引入_initialized 属性,当第一次构造对象时生成方法showColor ,再次生成对象时,此时的_initialized 已经是true,就避免了重复生成函数,属性的定义和函数的定义都在构造函数内,也满足了语义上的对象封装概念。

我们应当尽量采用 构造函数/原型混合方式 动态原型方式 来创建ECMAScript对象。
相关标签: prototype Ruby