面向对象的javascript
一、创建对象
创建对象的几种方式:
var obj = {};
var obj = new Object();
var obj = Object.create(fatherObj);
var Obj = function(a,b){this.a=a;this.b=b;};
Obj_object = new Obj(a,b);
二、通过继承创建对象
var obj = Object.create(fatherObj);
三、使用构造器创建对象
var Obj = function(a,b){this.a=a;this.b=b;};
Obj_object = new Obj(a,b);
四、call、apply调用实现的装饰器模式
可以指定this指向的调用方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>面向对象的 JavaScript</title>
</head>
<body>
<script type="text/javascript">
/*创建对象方式非常便利,
* javascript对于声明在内部或者外部的方法没有区别对待*/
//1.定义对象 var obj = new Object();与下面定义类型方式等同
var obj_1 = {
id : "No ID",
details:null,
fnInner:function(str){//方法调用模式,this指向方法所在对象
this.details = (this.id = str +" "+"Function Inner");
}
}
obj_1.fnOuter = function(str){//函数调用模式,this指向调用函数的对象
this.details = (this.id = str +" "+"Function Outer");
}
obj_1.fnInner("obj_1 ID");
console.log(obj_1.details);
obj_1.fnOuter("obj_1 ID");
console.log(obj_1.details); //2.使用Object.create()创建对象实现继承
var obj_2 = Object.create(obj_1);
//编写obj_2自己的属性
obj_2.id = "NO ID";
obj_2.details = null;
obj_2.func = function(str){
this.details = (this.id = str +" "+"Function");
}
obj_2.func("obj_2 ID");
console.log(obj_2.details);
obj_2.fnInner("obj_2 ID");
console.log(obj_2.details+" inhert obj_1");
obj_2.fnOuter("obj_2 ID");
console.log(obj_2.details+" inhert obj_1"); /*主流语言创建类以及调用类的方式,
* 在javascript中的实现十分笨拙,牵扯到prototype关键字的使用
* 更是容易造成混乱*/
//3.使用构造函数来创建“类”
var Obj_3 = function (id, details) {
//初始化属性
this.id = id;
this.details = details;
}
//显示使用prototype使函数成为该对象的方法
Obj_3.prototype.funcPrototype = function(str){
this.details = (this.id = str +" "+"prototype Function");
}
//我理解为静态方法不能获取this关键字的引用,本身与类没有任何关系
//prototype关键字的使用导致对象创建混乱,javascript的编程思路不清晰导致
//所以采取用大写字母声明的方式来避免
Obj_3.funcStatic = function(str){
return str +" "+"static Function";
}
var Obj_3_object = new Obj_3("Obj_3 ID Code", "Obj_3 Details");
Obj_3_object.funcPrototype("Obj_3");
console.log(Obj_3_object.details);
console.log(Obj_3.funcStatic("Obj_3")); /*对象的call、apply调用*/
var obj_4 = {
details:"NOT Null",
func:function(str){
return (this.details += str);
}
}
//在函数层级实现装饰器模式
//关键字this的指向-->call或apply的第一个参数
obj_4.func.call(obj_1,"obj_1 调用 obj_4 function func");
console.log(obj_1.details);
</script>
</body>
</html>
面向对象的 JavaScript的更多相关文章
-
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
-
前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
-
摘抄--全面理解面向对象的 JavaScript
全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...
-
面向对象的JavaScript --- 动态类型语言
面向对象的JavaScript --- 动态类型语言 动态类型语言与面向接口编程 JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承. Jav ...
-
面向对象的JavaScript --- 封装
面向对象的JavaScript --- 封装 封装 封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化 ...
-
面向对象的JavaScript --- 多态
面向对象的JavaScript --- 多态 多态 "多态"一词源于希腊文 polymorphism,拆开来看是poly(复数)+ morph(形态)+ism,从字面上我们可以理解 ...
-
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...
-
第1章 面向对象的JavaScript
针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...
-
javascript面向对象之Javascript 继承
转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...
随机推荐
-
IOS学习之初识KVC
什么是kvc? kvc (key-value coding )键值编码,是ios 提供的一种通过key间接的来访问对象属性的一直方式. 哪些类支持kvc操作? kvc的操作方法由NSKeyValueC ...
-
pdf.js在IIS中配置使用笔记
最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但 ...
-
[MSSQL]如何高效查询表的总记录数
如何高效查询表的总记录数?[总结-整理-马克] 首先想到的自然是在表主键上应用COUNT函数来查询了,这个是目前使用最多的方法,没有之一 ) ROWS FROM product 这里再给出一些其它方法 ...
-
JavaScript学习记录总结(十)——几个重要的BOM对象
一.弹出框 <script type="text/javascript"> window.onload=function(){ window.al ...
-
poj 3259 Wormholes spfa算法
点击打开链接 Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25582 Accepted: 9186 ...
-
Java Servlet与Applet、CGI、JSP的比较
Java Servlet是一种独立于平台和协议的服务器端的Java应用程序,可以生成动态的Web页面. Java Servlet是位于Web 服务器内部的服务器端的Java应用程序,与传统的从命令行启 ...
-
FireMonkey下的异形窗体拖动(句柄转换)
DelphiXE2 Firemoney FMX 的窗体不只是为windows的, 所以很多功能都没有了. 最常见的就是拖拽了 先看 VCL时代 一个经典拖动代码 ReleaseCapture(); S ...
-
将Python3导出为exe程序
一.pyinstaller简介 Python是一个脚本语言,被解释器解释执行.它的发布方式: .py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的各 ...
-
菜鸟翻译:国外的一个关于.net core的学习系列 第一天(安装并运行.NET core 到windox系统里面)
原文地址: Day 1 - Installing and Running .NET Core on a Windows Box 免责声明:我不是.NET Core 的团队成员.我使用的工具是公开可用的 ...
-
C语言清空输入缓冲区
来源:http://blog.csdn.net/guanyasu/article/details/53153705 https://zhidao.baidu.com/question/5241738. ...