javascript关于面向对象的总结_xiaolei1982的博客-CSDN博客_js的obj.cc
javascript关于面向对象的总结
xiaolei1982
于 2008-10-02 21:49:00 发布
2054
收藏
文章标签：
javascript
function
object
constructor
null
bt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolei1982/article/details/3010066
版权
对于javascript大家大部分时间用来做效果，但却忽视了最基础的东西，
当大家把javascript基本功学扎实了，我认为对以后写出漂亮的js代码有很大的帮助，
今天就总结下我对javascript关于面向对象方面的理解
首先总结一下javascript中的"类",
第一种算是比较灵活的方式了，成为工厂定义方式
var obj=new Object;obj.color='red';obj.dodo=function(){...};
为什么说它灵活，就是因为它可以在实例化对象后，可以对该对象增加属性，可以完善我们的需求，
我们经常会得到实例化的对象比如:=var aa=document.getElementById('lover')，此时我们可以很方便的增加各种方法属性，
aa.οnclick=function(){...};aa.lover='i love you ';等，以至传递的时候只需要传递该对象；
<script   language= "javascript">var obj=new Object;obj.color='red';obj.dodo=function(){alert('aa')};for(aa in obj){alert(aa);//color;dodo;}</script> 
javascript中定义类我们平时都是按照这种方式，因为毕竟和java和c#比较接近，
function Car(scolor,snum){this.color=scolor;this.dodo=function(){alert('aa')};}//这叫做构造函数方式定义类var obj=new Car('yellow',30);for(aa in obj){alert(aa);//color;dodo}
上面不用多介绍大家是最熟悉的了，
接下来介绍原型方式：
什么是原型，关于具体的概念大家可以查看资料，不想说太多，只想举例子来说明，
<script   language= "javascript">function Car(scolor,snum){this.color=scolor;this.dodo=function(){alert('aa')};}Car.prototype.getValue = function (){return this.color;}Car.prototype.setValue = function (value){this.color = value;}var obj=new Car('yellow',30);obj.setValue(666);alert(obj.getValue());//666for(aa in obj){alert(aa);//color;dodo;setValue;getValue}</script> 
可以看到利用原型可以为对象增加属性和方法，具体为什么要利用原型来操作，概念性的问题可以查资料，
但是有一点需要注意的是：
<script   language= "javascript">function Car(scolor,snum){//this.cc="cc";//this.docc=function(){alert(this.cc)}}Car.prototype.cc = "cccc"Car.prototype.docc = function (){alert(this.cc)}var obj=new Car('yellow',30);for(aa in Car.prototype){alert(aa);//cc;docc}alert(obj.cc);obj.docc();</script> 
虽然同样是给对象增加了cc属性和docc方法，但是查找顺序是先查找构造函数中是否有该属性和方法，
没有再搜索propertype，根据
<script   language= "javascript">function Car(scolor,snum){this.cc="cc";this.docc=function(){alert(this.cc)}}Car.prototype.cc = "cccc"Car.prototype.docc = function (){alert(this.cc)}var obj=new Car('yellow',30);alert(obj.cc);//ccdelete obj.cc;alert(obj.cc);//ccccobj.docc();//ccccdelete obj.docc();obj.docc();//cccc</script> 
可以看到首先删除两个属性仍然可以输出属性值，并且第一个obj.docc()获取的是原型中的cc属性值
看下面的例子：
<script   language= "javascript">function Car(scolor,snum){this.cc="cc";}Car.prototype.cc = "cccc"Car.prototype.docc = function (){alert(this.cc)}var obj=new Car('yellow',30);Car.prototype.docc();//cccc</script> 
可以直接调用原型方法，调用的是原型中的cc属性而不是构造函数的，
如果没有定义原型cc属性，就会显示undefined，在直接调用原型方法时这是需要注意的地方
再然后介绍一下javascript静态的实现方法：
<script   language= "javascript">function Car(){Car.docc = function (){alert('cc')}}Car.docc = function (){alert('cccc')}Car.docc();//ccccvar obj=new Car();//初始化后构造函数中的静态方法覆盖外边定义的静态方法，需要注意！Car.docc();//cc</script> 
在了解以上基本概念以后，接下来介绍一下javascript如何实现继承，
我们知道所有的对象都是继承objec类，而javascript中是怎样继承了object类呢？
其实在javascript中隐藏了
Car.prototype = new Object();
作用是什么呢？很明显Object中有toString()方法，
这样
Car.paopertype.toString()=function(){...}//是不是就显而易见了，在实例化Car可以成功的引入该属性，而Object中的所有属性和方法都归了Car，就这样Car继承了Object的所有属性和方法。<script   language= "javascript">function Car(scolor,snum){this.cc="cc";}alert(Car.toString());</script> 
上面的例子不是太贴切，我补充一个大家看看
<script   language= "javascript">function obj(){this.aa='aa';this.bb=function(){alert('==========')};}function Car(){ this.cc="cc";}Car.prototype = new obj();var aa=new Car();for(a in aa){alert(a);//aa;bb;cc}aa.bb();for(b in Car.prototype){alert(b);//aa;bb}</script> 
这样大家就能明白
Car.prototype = new obj();
这句话的含义了。
接下来又引出一个重要属性，constructor，
<script   language= "javascript">function Car(scolor,snum){this.cc="cc";}alert(Car.prototype.constructor);//constructor就是指向自己本身的一个属性</script> 
再看下面
<script   language= "javascript">function Car(scolor,snum){this.cc="cc";}Car.prototype.cc = "cccc"Car.prototype.docc = function (){alert(this.cc)}alert(Car.prototype.constructor.prototype.cc);//ccccCar.prototype.constructor.prototype.docc();//ccccalert(Car.prototype.constructor===Car);//true</script> 
大家看结果明白了吧
还有让大家比较头疼的问题就是call和apply的用法，
首先给大家做个解释，
function classA(scolor){this.docc=function(){...}}function classB(){//this.newMethod=classA;//this.newMethod(scolor);//delete this.newMethod();//这三行与下面的call是一个效果，通过这个例子大家就应该明白call具体是怎样执行的了，等同于上面三行的实现，一句this.newMethod(scolor);函数调用，就将classA中的关于this.的方法和属性就都归classB，因为此时classA中的this指针在classB内部指向的就是classB本身，所以这也是实现继承的一种手段，classA.call(this,scolor);}
完整的例子：
<script   language= "javascript">function classA(scolor){this.cc=scolor;this.docc=function(){alert(this.cc)}}function classB(){classA.call(this,"yellow");}var obj=new classB();alert(obj.cc)//yellowobj.docc();//yellow</script>
此时大家想原型方法能够继承吗？其实就按照我上面的解释，大家也该明白函数调用this.newMethod(scolor)只调用函数本身，就象我们平时使用函数一样，不会牵扯到原型上去，所以
<script   language= "javascript">function classA(scolor){this.cc=scolor;this.docc=function(){alert(this.cc)}}classA.prototype.dd = "dddd"classA.prototype.dodd = function (){alert(this.dd)}function classB(){classA.call(this,"yellow");}var obj=new classB();alert(obj.dd)//undefinedobj.dodd();//出错没有该方法</script> 
那我们怎么办呢？很简单，只要仔细看了我上面的介绍，
<script   language= "javascript">function classA(scolor){this.cc=scolor;this.docc=function(){alert(this.cc)}}classA.prototype.dd = "dddd"classA.prototype.dodd = function (){alert(this.dd)}function classB(){}classB.prototype = new classA("yellow");var obj=new classB();alert(obj.cc)//yellowobj.docc();//yellowalert(obj.dd)//ddddobj.dodd();//dddd</script> 
我再给大家举个合用的例子
<script   language= "javascript">function classA(scolor){this.cc=scolor;this.docc=function(){alert(this.cc)}}classA.prototype.dd = "dddd"classA.prototype.dodd = function (){alert(this.dd)}function classB(){classA.call(this,"red");//初始化red后继承}classB.prototype = new classA("yellow");//初始化yellow后继承var obj=new classB();alert(obj.cc)//redobj.docc();//redalert(obj.dd)//yellowobj.dodd();//yellow</script> 
为什么会是red不是yellow原因很简单，一个是在构造函数内实现了继承，一个是原型继承，而我们说过构造函数在
原型之前调用，所以会出现red而不是yellow。
最后借助风之石写的一个例子结束此次文章：
<html><body><button id=btTest>test</button></body></html><script>if(!document.all){    HTMLElement.prototype.attachEvent=function(sType,foo){        this.addEventListener(sType.slice(2),foo,false)    }}Function.prototype.bindNode=function(oNode){    var foo=this,iNodeItem    //使用了全局数组__bindNodes，通过局部变量iNodeItem进行跨函数传值，如果直接传送oNode，也将造成闭包    if(window.__bindNodes==null)        __bindNodes=[]    __bindNodes.push(oNode)    iNodeItem=__bindNodes.length-1    //释放oNode    oNode=null    return function(e){        foo.call(__bindNodes[iNodeItem],e||event)             //需要注意的是调用了call本身就是一个调用了foo()函数的过程，所以上面返回的是一个函数    }}abc()function abc(){    var bt=document.getElementById("btTest")    bt.attachEvent("onclick",function(){        //如果不经过bindNode处理，下面的结果将是undefined        alert(this.tagName)    }.bindNode(bt))    //释放bt    bt=null}</script>
大家可以自己回味一下call的用法，不明白或者有错误可以在回复中指出，匆匆忙忙写完一定会有不足之处，
请指教
xiaolei1982
关注
关注
点赞
收藏
打赏
评论
javascript关于面向对象的总结
对于javascript大家大部分时间用来做效果，但却忽视了最基础的东西，当大家把javascript基本功学扎实了，我认为对以后写出漂亮的js代码有很大的帮助，今天就总结下我对javascript关于面向对象方面的理解首先总结一下javascript中的"类",第一种算是比较灵活的方式了，成为工厂定义方式var obj=new Object;obj.color=red;obj.dodo=fu
复制链接
扫一扫
JavaScript面向对象之体会[总结]
10-30
看过很多JavaScript书，对JavaScript的面向对象讲的都比较深入，但是并没有做到深入浅出，总结了我做的一些JavaScript程序的经验，以简洁明了的文字使大家明白JavaScript面向对象的实现。
javascript面向对象程序设计实践常用知识点总结
10-16
主要介绍了javascript面向对象程序设计实践常用知识点,结合实例形式总结分析了javascript面向对象程序设计中原型引用类型、属性、方法相关操作技巧与注意事项,需要的朋友可以参考下
评论 6
您还未登录，请先
登录
后发表或查看评论
JS读取XML
03-17
NULL
博文链接：https://wyx810316.iteye.com/blog/576336
JavaScript中对象与函数的某些事[JavaScript语言精粹-N1]
dia83499的博客
03-19
57
今天在读《JavaScript语言精粹》的时候，关于函数的一个部分，始终觉得有点难以理解，代码如下： 1: var obj = (function(){
2: var value = 0;
3:
4: return {
...
js获取对象属性的两种方法，object.属性名，[‘属性名’ ]
热门推荐
做一个认真的程序员
08-10
2万+
1、通过点的方式
2、通过括号的方式
例：
<input type="text" value="hello" id="text"/>
var oText = document.getElementById("text")
（1）通过点的方式 oText.property
注意的是：（a）点要查找的是JS中本来就存在的属性名，不能找到变量或者函数的参数，比如下面：
...
javascript面向对象三大特征之多态实例详解
10-16
主要介绍了javascript面向对象三大特征之多态,结合实例形式详细分析了javascript面向对象程序设计中多态的概念、原理,并结合实例形式总结了多态的实现方法与使用技巧,需要的朋友可以参考下
JavaScript面向对象核心知识与概念归纳整理
10-15
主要介绍了JavaScript面向对象核心知识与概念,整理总结了JavaScript面向对象程序设计中基本概念、原理与操作注意事项,需要的朋友可以参考下
javascript面向对象总结
04-06
javascript_code.rar,extends.js,new.js
javascript 的面向对象特性参考
12-12
这是我学习javascript中面向对象特性的一点总结。希望对具有其他语言的面向对象设计经验的朋友理解javascript的OO有所帮助。我具有c++,java和python的面向对象设计的经验。 总的感受， javascript作为一种弱类型的...
javascript面向对象创建对象的方式小结
10-16
主要介绍了javascript面向对象创建对象的方式,结合实例形式总结分析了javascript常见的7种创建对象的方式,需要的朋友可以参考下
javascript 面向对象封装与继承
10-25
本文是对自己这么长时间以来学习javascript面向对象的总结，这里针对封装和继承结合实例进行了详细分析，给有相同需求的小伙伴们参考下吧。
JavaScript是面向对象还是基于对象
uijj556的博客
11-26
1082
语言和宿主的基础设施由对象来提供，并且JavaScript程序即是一系列相互通讯的对象集合。
JavaScript面向对象的实现方法小结
10-24
主要介绍了JavaScript面向对象的实现方法,实例总结了两种常见的面向对象的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript面向对象和内置对象
08-23
javascript的面向对象和内置对象讲解，包括了一些常用的方法和对象总结
JavaScript 之面向对象
msn131420的博客
03-03
1908
JavaScript 面向对象
一、面向对象编程介绍
1.1 两大编程思想
面向过程
面向对象
1.2 面向过程编程 POP(Process-oriented programming)
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
举个栗子：将大象装进冰箱，面向过程做法。
面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。
1.3 面向对象编程 OOP (Object Oriented .
JavaScript 进阶教程(1)--面向对象编程
AlbertYang的博客
08-16
1万+
1 学习目标
理解面向对象开发思想
掌握 JavaScript 面向对象开发相关模式
2 面向对象介绍
2.1什么是对象
Everything is object （一切皆对象）
我们可以从两个层次来理解对象：
(1) 对象是单个事物的抽象。
一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
(2) 对象是一个.
JavaScript 面向对象编程
gako15587481707的博客
06-18
401
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
javascript面向对象要点总结
08-24
javascript面向对象要点总结,感觉不错
Javascript 面向对象（一）(共有方法，私有方法，特权方法)
10-28
最近在网上盾一些JS面向对象的东西。把其他高手们总结的东西，加上自己的理解，总结一下
Svelte 带来哪些新思想？赶紧学起来！
最新发布
weixin_39415598的博客
12-19
447
本文介绍
点赞 + 关注 + 收藏 = 学会了
Svelte 是我用过最爽的框架，就算 Vue 和 React 再强大，生态再好，我还是更喜欢 Svelte，因为它开发起来真的很爽。
其实在很久之前我就注意到 Svelte ，但一直没把这个框架放在心上。
因为我之前的工作主要使用 Vue，偶尔也会接触到一些 React 项目，但完全没遇到过使用 Svelte 的项目。
直到 Vite 的出现，我才开始开始重视 Svelte。
从 Vite文档 里可以看到它支持这些模板：
JavaScrip
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
xiaolei1982
CSDN认证博客专家
CSDN认证企业博客
码龄16年
暂无认证
62
原创
5万+
周排名
124万+
总排名
30万+
访问
等级
3694
积分
197
粉丝
29
获赞
71
评论
61
收藏
私信
关注
热门文章
c# 反射的用法
29852
location.href的用法
19262
抽象语法树
16505
c#深拷贝与浅拷贝
13308
关于php-cgi的配置
9843
最新评论
抽象语法树
SPSITA:
我只是一只正在看论文的小猫咪而已
动态连接库和符号(symbol)
m0_43424641:
写的特别清楚
PHP 7中新的Hashtable实现和性能改进
打破砂锅问到底007:
确实很不错，我还想分享php5的hashTable,现在看来过时了，技术发展真是太快了
2019.03.16[code=php]
[/code]
PHP 7中新的Hashtable实现和性能改进
又巍:
作者厉害，翻译的也很好，知识太多了。
swoole流程图
xiaolei1982:
你用的swoole版本是比较老的代码，新代码中没有swServer_send2worker_blocking
swoole使用的unix socket dgram 每次读取的一定是一个完整的包。所以肯定是task结构
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
panic & recover
openresty 总结
golang问题总结
2019年1篇
2018年2篇
2017年10篇
2016年15篇
2015年23篇
2014年12篇
2013年7篇
2012年1篇
2011年7篇
2010年4篇
2009年1篇
2008年14篇
2007年50篇
目录
目录
最新文章
panic & recover
openresty 总结
golang问题总结
2019年1篇
2018年2篇
2017年10篇
2016年15篇
2015年23篇
2014年12篇
2013年7篇
2012年1篇
2011年7篇
2010年4篇
2009年1篇
2008年14篇
2007年50篇
目录
评论 6
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
xiaolei1982
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值