javascript面向对象的理解及简单的示例

零.本节重点:

1.封装:

2.继承:

壹.下面理解:

一. javascript面向对象概念:

为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念:

1.一切事物皆对象

2.对象具有封装和继承特性

3.对象与对象之间使用消息通信,各自存在信息隐藏

以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装、继承和多态,但存在非对象性质的全局函数和变量。Java、C# 是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。但这里函数本身是一个过程,只是依附在某个类上。

然而,面向对象仅仅是一个概念或者编程思想而已,它不应该依赖于某个语言存在。比如 Java 采用面向对象思想构造其语言,它实现了类、继承、派生、多态、接口等机制。但是这些机制,只是实现面向对象编程的一种手段,而非必须。换言之,一门语言可以根据其自身特性选择合适的方式来实现面向对象。所以,由于大多数程序员首先学习或者使用的是类似 Java、C++ 等高级编译型语言(Java 虽然是半编译半解释,但一般做为编译型来讲解),因而先入为主地接受了“类”这个面向对象实现方式,从而在学习脚本语言的时候,习惯性地用类式面向对象语言中的概念来判断该语言是否是面向对象语言,或者是否具备面向对象特性。这也是阻碍程序员深入学习并掌握 JavaScript 的重要原因之一。

实际上,JavaScript 语言是通过一种叫做 原型(prototype的方式来实现面向对象编程的。下面就来讨论 基于类的(class-based)面向对象基于原型的 (prototype-based) 面向对象这两种方式在构造客观世界的方式上的差别。

二.基于类的面向对象和基于原型的面向对象方式比较:

在基于类的面向对象方式中,对象(object依靠 类(class来产生。而在基于原型的面向对象方式中,对象(object则是依靠 构造器(constructor利用 原型(prototype构造出来的。举个客观世界的例子来说明二种方式认知的差异。例如工厂造一辆车,一方面,工人必须参照一张工程图纸,设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的 类 (class),而车就是按照这个 类(class制造出来的;另一方面,工人和机器 ( 相当于 constructor) 利用各种零部件如发动机,轮胎,方向盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。

事实上关于这两种方式谁更为彻底地表达了面向对象的思想,目前尚有争论。但笔者认为原型式面向对象是一种更为彻底的面向对象方式,理由如下:

首先,客观世界中的对象的产生都是其它实物对象构造的结果,而抽象的“图纸”是不能产生“汽车”的,也就是说,类是一个抽象概念而并非实体,而对象的产生是一个实体的产生;

其次,按照一切事物皆对象这个最基本的面向对象的法则来看,类 (class) 本身并不是一个对象,然而原型方式中的构造器 (constructor) 和原型 (prototype) 本身也是其他对象通过原型方式构造出来的对象。

再次,在类式面向对象语言中,对象的状态 (state) 由对象实例 (instance) 所持有,对象的行为方法 (method) 则由声明该对象的类所持有,并且只有对象的结构和方法能够被继承;而在原型式面向对象语言中,对象的行为、状态都属于对象本身,并且能够一起被继承(参考资源),这也更贴近客观实际。

最后,类式面向对象语言比如 Java,为了弥补无法使用面向过程语言中全局函数和变量的不便,允许在类中声明静态 (static) 属性和静态方法。而实际上,客观世界不存在所谓静态概念,因为一切事物皆对象!而在原型式面向对象语言中,除内建对象 (build-in object) 外,不允许全局对象、方法或者属性的存在,也没有静态概念。所有语言元素 (primitive) 必须依赖对象存在。但由于函数式语言的特点,语言元素所依赖的对象是随着运行时 (runtime) 上下文 (context) 变化而变化的,具体体现在 this 指针的变化。正是这种特点更贴近 “万物皆有所属,宇宙乃万物生存之根本”的自然观点。在 程序清单 1中 window 便类似与宇宙的概念。

对象的上下文依赖:

 var str = "我是一个 String 对象 , 我声明在这里 , 但我不是独立存在的!"
var obj = { des: "我是一个 Object 对象 , 我声明在这里,我也不是独立存在的。" };
var fun = function() { console.log( "我是一个 Function 对象!谁调用我,我属于谁:", this ); }; obj.fun = fun; console.log( this === window );     // 打印 true console.log( window.str === str );  // 打印 true console.log( window.obj === obj );  // 打印 true console.log( window.fun === fun );  // 打印 true fun();                              // 打印 我是一个 Function 对象!谁调用我,我属于谁:window obj.fun();                          // 打印 我是一个 Function 对象!谁调用我,我属于谁:obj fun.apply(str);                   // 打印 我是一个 Function 对象!谁调用我,我属于谁:str 

三.最基本的面向对象:

字面式 (literal notation) 对象声明:

var person = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } }; person.height = 176; delete person[ “age” ];

四.使用函数构造器构造对象:

使用构造器 (constructor) 创建对象:

 // 构造器 Person 本身是一个函数对象
function Person() { // 此处可做一些初始化工作
} // 它有一个名叫 prototype 的属性
Person.prototype = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } } // 使用 new 关键字构造对象
var p = new Person();

五.彻底理解原型链 (prototype chain):

对象的 __proto__ 属性和隐式引用:

function Person( name ) { this.name = name; }
var p = new Person();
// 对象的隐式引用指向了构造器的 prototype 属性,所以此处打印 true console.log( p.__proto__ === Person.prototype ); // 原型本身是一个 Object 对象,所以他的隐式引用指向了
// Object 构造器的 prototype 属性 , 故而打印 true console.log( Person.prototype.__proto__ === Object.prototype ); // 构造器 Person 本身是一个函数对象,所以此处打印 true console.log( Person.__proto__ === Function.prototype );

六.彻底理解原型链 (prototype chain):

利用原型链 Horse->Mammal->Animal 实现继承:

// 声明 Animal 对象构造器function Animal() { } // 将 Animal 的 prototype 属性指向一个对象,// 亦可直接理解为指定 Animal 对象的原型Animal.prototype = { name: "animal", weight: 0, eat: function() { alert( "Animal is eating!" ); } } // 声明 Mammal 对象构造器function Mammal() { this.name = "mammal"; } // 指定 Mammal 对象的原型为一个 Animal 对象。// 实际上此处便是在创建 Mammal 对象和 Animal 对象之间的原型链Mammal.prototype = new Animal(); // 声明 Horse 对象构造器function Horse( height, weight ) { this.name = "horse"; this.height = height; this.weight = weight; } // 将 Horse 对象的原型指定为一个 Mamal 对象,继续构建 Horse 与 Mammal 之间的原型链Horse.prototype = new Mammal(); // 重新指定 eat 方法 , 此方法将覆盖从 Animal 原型继承过来的 eat 方法Horse.prototype.eat = function() { alert( "Horse is eating grass!" ); } // 验证并理解原型链var horse = new Horse( 100, 300 ); console.log( horse.__proto__ === Horse.prototype ); console.log( Horse.prototype.__proto__ === Mammal.prototype ); console.log( Mammal.prototype.__proto__ === Animal.prototype );

七.JavaScript 类式继承的实现方法:

使用 Simple Inheritance 实现类式继承:

// 声明 Person 类
var Person = Class.extend( { _issleeping: true, init: function( name ) { this._name = name; }, isSleeping: function() { return this._issleeping; } } ); // 声明 Programmer 类,并继承 Person var Programmer = Person.extend( { init: function( name, issleeping ) { // 调用父类构造函数this._super( name ); // 设置自己的状态this._issleeping = issleeping; } } ); var person = new Person( "张三" );
var diors = new Programmer( "张江男", false ); // 打印 true
 console.log( person.isSleeping() ); // 打印 false
 console.log( diors.isSleeping() ); // 此处全为 true,故打印 true console.log( person instanceof Person && person instanceof Class && diors instanceof Programmer && diors instanceof Person && diors instanceof Class );

八.JavaScript 私有成员实现:

使用闭包实现信息隐藏:

// 声明 User 构造器
function User( pwd ) { // 定义私有属性var password = pwd; // 定义私有方法 function getPassword() { // 返回了闭包中的 password return password; } // 特权函数声明,用于该对象其他公有方法能通过该特权方法访问到私有成员this.passwordService = function() { return getPassword(); } } // 公有成员声明
User.prototype.checkPassword = function( pwd ) { return this.passwordService() === pwd; }; // 验证隐藏性
var u = new User( "123456" ); // 打印 true console.log( u.checkPassword( "123456" ) ); // 打印 undefined
 console.log( u.password ); // 打印 true console.log( typeof u.gePassword === "undefined" );

参考:https://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx   使用面向对象的技术创建高级 Web 应用程序

转载于:https://www.cnblogs.com/zlp520/p/4546764.html

javascript javascript面向对象的理解及简单的示例相关推荐

  1. javascript 之 面向对象【理解对象】

    第五版本 6.1.1  属性类型      1/数据属性 :包含有数据值的问题.有内部有特性和属性,是为了实现javaScript引擎用的,在javaScript中不能直接访问  [[Configur ...

  2. JavaScript面向对象--继承 (超简单易懂,小白专属)...

    JavaScript面向对象--继承 (超简单易懂,小白专属) 一.继承的概念 子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之 ...

  3. JavaScript面向对象——深入理解寄生组合继承

    JavaScript面向对象--深入理解寄生组合继承 之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承 寄生组合继承: 思路:组合继承中,构造函数继 ...

  4. 前端面试回顾(1)---javascript的面向对象

    前言 前一阵面试,过程中发现问到一些很基础的问题时候,自己并不能很流畅的回答出来.或者遇到一些基础知识的应用,由于对这些点理解的不是很深入,拿着笔居然什么都写不出来,于是有了回顾一下这些基础知识的想法 ...

  5. javascript 的面向对象特性参考

    最近在看用javascript+css实现rich client.javascript 也是一个蛮有意思的语言.特别是其面向对象的实现和其他"标准"的OO launguage有很大 ...

  6. 了解使用JavaScript进行面向对象编程的基础(并增强您的编码…

    by Kris Baillargeon 通过克里斯·拜伦 学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...

  7. JavaScript 使用面向对象的技术创建高级 Web 应用程序

    最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...

  8. JavaScript是面向对象还是基于对象

    与其他语言相比,JavaScript中的对象总是显得不是那么合群. 我们在学习JavaScript面向对象时,往往也会有疑惑: 为什么JavaScript知道ES6才有对象的概念,但是却没有像其他语言 ...

  9. JavaScript(JS) 面向对象(封装、继承、多态)

    面向对象是把事物给对象化,包括其属性和行为.面向对象编程更贴近实际生活的思想.可以简单的理解面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象.本文主要介绍JavaScrip ...

  10. JavaScript高级 面向对象、正则表达式

    JavaScript高级 面向对象.正则表达式 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 typora-cop ...

最新文章

  1. 团队项目个人进展——Day05
  2. 矩阵推导后注意力机制居然是这样
  3. 2017年vb计算机考试,2017年计算机二级VB考试习题及答案
  4. python方格染色_判定二部图的着色算法(Python),题,染色法,判断,二分
  5. 多域名下Mvc的Http缓存冲突的问题
  6. registerModulePath
  7. python3 class init_python3 module中__init__.py的需要注意的地方
  8. Web前端开发实用在线工具
  9. [P4063][JXOI2017]数列(DP)
  10. 友商侧目!realme首款升降全面屏手机realme X发布
  11. vs2015运行项目时出现“编译器失败,错误代码为 1”的解决方案
  12. Atitit flowable使用总结 目录 1. flowable 1 1.1. 添加依赖 1 1.2. Flowable的启动接口 2 2. 还是使用简单流程来完成业务流程的学习, 2 2.1.
  13. 网络基础知识(黑马教程笔记)-7-异步编程和Promise
  14. 用echarts绘制饼图---绘制南丁格尔玫瑰图
  15. sitemesh应用
  16. kali扫描内网ip_kali linux 如何查找局域网ip
  17. Linux无头浏览器的自动化测试实现
  18. 腾讯云CDN加速COS图床
  19. 一文读懂nginx gzip_static
  20. “消失”的Android技术博主们现在如何!Android开发者前路在哪?

热门文章

  1. 计算机R3处理器,电脑r3处理器好不好
  2. sqlite3_exec返回SQLITE_MISUSE(21)
  3. jupyter notebook出现kernel waitting,please wait一系列错误的解决办法
  4. while(i--)
  5. Norms in Matrix and Vector
  6. Yarn的任务推测执行机制
  7. 初来乍到,多多关照。
  8. Java经过的天数的计算公式_Java如何通过计算两个日期的时间差来算出天数
  9. 【MATLAB笔记】对矩阵进行满秩分解
  10. 51单片机之共阳极静态数码管