JS学习-面向对象

原创 2013年12月05日 22:11:37

  JS 是一种基于原型(prototype)的面向对象的语言,但是没有类的概念,所有的一切都派生自现有对象的一个副本。

  基于对象和面向对象实际上都是以对象为中心,从本质上讲没有区别。JavaScript中没有,所以有人把类叫作原型对象,它们两个在编程中发挥的作用都是一个意思,这样就比较容易理解基于原型的面向对象。


对象


先从JS中的对象说起,

JavaScript中的内置对象:

  > Function对象

Function类型对象分为两类:

Function实例,例如alert(),可以使用参数来调用。

做为构造函数的function,必须通过new关键字来进行实例化。

如:

functionmyFunction(){

 

}

> Object对象,这类对象无法像function类对象那样调用,可以用它来创建简单的静态对象。

  如:var obj = newObject();或者var obj = {};

> Array对象,是一种特殊的属性和方法的集合,

  如:var array= new Array();或者var array = [];

> StringBooleanNumber分别用来表示字符串、布尔值、数字。

> 还有MathDateRegExp及其他内置对象。

 

所有的内置对象都可以通过new关键字或其简单语法形式创建。

构造函数


构造函数都不陌生,用来新建同时初始化一个新对象的函数。

什么样的函数可以用来创建同时初始化新对象呢?答案是:任何一个函数,包括空函数。

JS中,function是构造函数的起点。

function A(){

 

}

继承

既然是面向对象,那继承是必不可上的特性,在JS中,因为JS是基于原型的面向对象,没有类的概念,这就导致无法从一个类扩展出另一个类的底层类结构,在JS中继承是通过简单的从一个对象原型向另一个对象原型复制方法而实现的。

通过例子直观的说明:

<scripttype="text/javascript">

 

function init(){

  //创建person对象

  var person = {};    //等同于var person = new Object();

  //创建person的方法getName和getAge

  person.getName= function(){

    alert("personname");

  }        

  person.getAge= function(){

    alert("personage");        

  }


  //创建另一个对象student

  var student = {};

  //创建student自己的方法getStuNum

  student.getStuNum= function(){

    alert("studentstuNum");
 
  };

  //student复制person的getName方法

  student.getName= person.getName;
 
  //覆盖原方法,验证是否是简单的复制

  person.getName= function(){

     alert("person1name");        
  
  }

  //student复制person的getAge方法

  student.getAge= person.getAge;
  
  student.getName();  //打印结果:person name

  person.getName();  //打印结果:person1 name

}

window.onload= init;

</script>

通过上面的例子说明在JS中继承是通过简单的从一个对象原型向另一个对象原型复制方法而实现的。那什么是原型?

原型

当我们在创建函数时,都自动添加了prototype属性,这就是函数的原型。

function A() {

   this.width = 10;

   this.key = "this is A";

 }

 A._objectNum = 0;//定义A的属性

 A.prototype.say =function(){//给A的原型对象添加属性

 alert("hello world")

 }

  通过A.prototype.say = function(),给函数的原型对象增加一个say属性并引用一个原型函数。原型只存在与function中,实质就是一个对象被创建后引擎默认创建一个空的prototype对象,既然对象是属性包那么原型也就是一个属性包。

  可以这样理解:原型就如C#中类的概念,prototype则是用来给类添加属性、方法的。

  在js中,每个对象默认都有一个[[Prototype]]属性,其保存着的地址就构成了对象的原型链,这也是JS底层的东西。如下例:



  从图中看到,无论是对象Object2还是Object3,都有一个属性保存了对Obj的原型对象的引用,对于这些对象来说,一些公用的方法可以在函数的原型中找到,节省了内存空间。

  简单说就是通过对象的Prototype保存对另一个对象的引用,通过这个引用往上进行属性的查找,这就是原型链。

 


小结

  JS的内容还有很多,从W3Chool中就能出来,本篇博客主要从JS 对象这个方向,整体进行了总结,学任何知识都一样,首先要从整体上有一个认识,知识还需要时间和实践的积累。



头疼啊,待续

版权声明:本文为博主原创文章,未经博主允许不得转载。

【JS学习笔记】 面向对象与原型

面向对象与原型

js面向对象学习笔记之九(BOM 与 DOM 中常用属性分析)

一  BOM对象 window 的 相关属性 1. 用户配置机器配置对象 navigator navigator.userAgent //该属性可以查看用户机器浏览器的配置 "Mozill...

JS学习笔记(10)面向对象

面向对象 程序设计方法程序设计描述系统如何通过程序来实现的过程,其为一种设计方法与语言实现无关。常见的设计方法有面向流程与面向对象。面向过程以程序的过程为中心,采用自定而下逐步细化的方法来实现。常见...

Js面向对象学习之function

js中的函数有三种表示方式:   //函数的第一种表示方式:函数关键字的方式 function f1() { alert("f1"); } //函数的第二种表示方式:函数字面量的方式 var f2 ...
  • H_Gao
  • H_Gao
  • 2015年10月07日 19:44
  • 567

JS学习笔记——面向对象,设计模式

面向对象,设计模式相关概念: JS中,只有函数具有作用域。定义在一个函数中的变量,在该函数内嵌的函数是可以访问的。 函数是运行在定义他们的作用域中,而不是运行在调用他们的作用域中。...

node.js学习之路(一)之“面向对象的JavaScript入门”

一、前言node.js以JavaScript为基础,因此学习node.js之前有必要复习一下JavaScript,其中我的学习之路是先看《JavaScript高级程序设计》,后看《JavaScript...

韩顺平 javascript教学视频_学习笔记19_js面向对象三大特征(封装,继承,多态)

js面向对象编程------三大特征 封装继承多态 面向对象的三大特征对任意的面向对象语言都是具有的,只是表现形式不一样 面向对象的三大特征都是先从抽象这个概念出来的 ...

js面向对象学习8 原型链的原理 __proto__

说到prototype,就不得不先说下new的过程。 我们先看看这样一段代码:   var Person = function () { }; var p = new Person(); ...
  • zha_zi
  • zha_zi
  • 2014年12月02日 12:11
  • 277

[Javascript 高级程序设计]学习心得记录9 js面向对象

感觉最难的部分就是面向对象了,大学期间学习的是面向过程的c/c++,工作之后也没有深入了解过面向对象,通过这次的学习和回顾,也算是对面向对象有了新的认识。不过就我在书上学到了结合个人理解随便说说,很可...

node.js学习之路(二)之“深入理解面向对象的JavaScript”

一、重新认识面向对象为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 一切事物皆对象 对象具有封装和继承特性 对象与对象之...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS学习-面向对象
举报原因:
原因补充:

(最多只允许输入30个字)