脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 对象

浅析JavaScript中的类型和对象

 更新时间：2013年11月29日 09:15:44   作者：  
这篇文章主要介绍了一些关于类型和对象的例子，大家看完例子后可能更容易理解类型和对象之间的联系

JavaScript是基于对象的，任何元素都可以看成对象。然而，类型和对象是不同的。本文中，我们除了讨论类型和对象的一些特点之外，更重要的是研究如何写出好的并且利于重用的类型。毕竟，JavaScript这种流行的脚本语言如果能够进行良好的封装，并形成一个庞大的类型库，对于重用是非常有意义的。

网上对于prototype的文章很多，一直没明白核心的思想。最后写了很多例子代码后才明白：prototype只能用在类型上。

以下是一些关于类型和对象的例子，大家看完例子后可能更容易理解类型和对象之间的联系：

 
例子代码
说明
1
Object.prototype.Property = 1;
Object.prototype.Method = function ()
{
    alert(1);
}
 
var obj = new Object();
alert(obj.Property);
obj.Method();
可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。

JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
2
var obj = new Object();
obj.prototype.Property = 1; //Error
//Error
obj.prototype.Method = function()
{
    alert(1);
}
在实例上不能使用prototype，否则发生编译错误
3
Object.Property = 1;
Object.Method = function()
{
    alert(1);
}
 
alert(Object.Property);
Object.Method();
可以为类型定义“静态”的属性和方法，直接在类型上调用即可
4
Object.Property = 1;
Object.Method = function()
{
    alert(1);
}
var obj = new Object();
alert(obj.Property); //Error
obj.Method(); //Error
实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。
5
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();
这个例子演示了通常的在JavaScript中定义一个类型的方法
6
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
Aclass.prototype.Property2 = 2;
Aclass.prototype.Method2 = function
{
    alert(2);
}
var obj = new Aclass();
alert(obj.Property2);
obj.Method2();
可以在外部使用prototype为自定义的类型添加属性和方法。
7
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
Aclass.prototype.Property = 2;
Aclass.prototype.Method = function
{
    alert(2);
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();
在外部不能通过prototype改变自定义类型的属性或方法。
该例子可以看到：调用的属性和方法仍是最初定义的结果。
8
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
    alert(2);
}
alert(obj.Property);
obj.Method();
可以在对象上改变属性。（这个是肯定的）
也可以在对象上改变方法。（和普遍的面向对象的概念不同）
9
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
obj.Property2 = 2;
obj.Method2 = function()
{
    alert(2);
}
alert(obj.Property2);
obj.Method2();
可以在对象上增加属性或方法
10
function AClass()
{
       this.Property = 1;
       this.Method = function()
       {
              alert(1);
       }
}
 
function AClass2()
{
       this.Property2 = 2;
       this.Method2 = function()
       {
              alert(2);
       }
}
AClass2.prototype = new AClass();
 
var obj = new AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2();
这个例子说明了一个类型如何从另一个类型继承。
11
function AClass()
{
       this.Property = 1;
       this.Method = function()
       {
              alert(1);
       }
}
 
function AClass2()
{
       this.Property2 = 2;
       this.Method2 = function()
       {
              alert(2);
       }
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function()
{
       alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method();
这个例子说明了子类如何重写父类的属性或方法。

以上例子中，关于通过类型实现重用方面，重要的有：
·例子1：JavaScript中允许添加行为的类型
·例子2：prototype使用的限制
·例子3：如何定义类型上的静态成员
·例子7：prototype在重定义类型的成员上的限制
·例子10：如何让一个类型继承于另一个类型
·例子11：如何在子类中重新定义父类的成员

JavaScript能够实现的面向对象的特征有：
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)
您可能感兴趣的文章:

相关文章

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    这篇文章主要为大家详细介绍了js鼠标点击图片切换效果，很实用的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 第四篇Bootstrap网格系统偏移列和嵌套列

    第四篇Bootstrap网格系统偏移列和嵌套列

    这篇文章主要介绍了Bootstrap网格系统偏移列和嵌套列的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 使用getBoundingClientRect方法实现简洁的sticky组件的方法

    使用getBoundingClientRect方法实现简洁的sticky组件的方法

    本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出来
    2016-03-03
  • 如何在postman中添加cookie信息步骤解析

    如何在postman中添加cookie信息步骤解析

    这篇文章主要介绍了如何在postman中添加cookie信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 微信QQ的二维码登录原理js代码解析

    微信QQ的二维码登录原理js代码解析

    这篇文章主要大家详细解析了微信QQ的二维码登录原理js代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js中toString()与valueOf()的使用

    js中toString()与valueOf()的使用

    tostring 和 valueOf 函数是解决值的显示和运算的问题，本文主要介绍了js中toString()与valueOf()的使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • js 动态给元素添加、移除事件的实现方法

    js 动态给元素添加、移除事件的实现方法

    下面小编就为大家带来一篇js 动态给元素添加、移除事件的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js实现网页计算器

    js实现网页计算器

    这篇文章主要为大家详细介绍了js实现网页计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 高性能web开发 如何加载JS，JS应该放在什么位置？

    高性能web开发 如何加载JS，JS应该放在什么位置？

    所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
    2010-05-05
  • JavaScript设计模式中的观察者模式

    JavaScript设计模式中的观察者模式

    这篇文章主要介绍了JavaScript设计模式中的观察者模式，观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性
    2022-06-06

最新评论