风趣的JavaScript面向对象入门课程一
在我们程序猿界一直流传这这么一个joke,没女票我们可以new一个、没房子没票子没车子我们同样new一个!当然这听着更像是一种自嘲,毕竟我们程序猿都爱自嘲,哈哈,废话不多说,今天就由我带着你们来入JavaScript面向对象这个坑!千万别弃坑!
一、理解对象:
创建对象的两种方法:直接声明、Object的实例化
直接声明:
1 Var zhangsan = { 2 3 Name : “zhangsan”, 4 5 Age : 29, 6 7 //创建一个introduce函数,用于返回张三的姓名 8 9 introduce.function(){ 10 11 return zhangsan.name; 12 13 } 14 15 }
Object的实例化:
1 Var zhangsan = new Object(); 2 3 zhangsan.name = “zhangsan”; 4 5 zhangsan.age = 29; 6 7 zhangsan.introduce = function(){ 8 9 return zhangsan.name; 10 11 }; 12 13
调用方法:
1 Document.write(zhangsan.name+zhangsan.age);或者 2 3 Alert(zhangsan.introduce());
二、类的实现:
工厂生产对象:适用于当需要大规模输出对象时的问题
1 Function CreateCar(engine,tire){ 2 3 Var car = new Object(); 4 5 car.engine=engine; 6 7 car.tire = tire; 8 9 return car; 10 11 }
调用工厂生产对象:
Var Audi = CreateCar(”four-engine”,”four-tire”);
生产出Audi一辆,即new了一个对象
说白了,工厂模式就是把创建对象的方法封装在函数中。
实际上,当你用instanceof运算符对实例Audi检测时:
Alert(Audi instanceof car);
结果会弹出对话框显示false。
即Audi不是car实例化出的对象!
三、构造函数
为解决上述问题特引入构造函数大佬
将以上的代码略作改写:
1 Function CreateCar(engine,tire){ 2 3 this.engine=engine; 4 5 this.tire=tire; 6 7 this.drive = function(){ 8 9 document.wirte(this.engine+this.tire); 10 11 }; 12 13 }
其实构造函数就是一个带this的普通函数,它不是大佬,哈哈!它里面的this就指通过这个构造函数生成一个新的对象。
虽说我们揭开了它大佬的面纱,但大佬还是大佬,它还是有用的..
1 Var Audi = new car(”four-engine”,”four-tire”); 2 3 4 5 Alert(Audi instanceof car);
结果惊人的弹出显示:true
大佬果然是大佬!
但问题又来了,大佬也不是没有缺点,它的模式虽然好用,但是存在浪费内存的嫌疑,这就让大佬的声誉受到了严重的影响:
每一次生成一个person对象,都必须重新构建一遍sayName函数,真的麻烦!
铛,铛,铛!震惊 “全局函数” 出场竟然..
1 Function sayName(){ 2 3 Document.write(this.name); 4 5 }
然后再把person类中将sayName()指向外部的sayName()
this.sayName = sayName;
厉害了wold哥!
问题又来了,在全局变量中定义的函数只能被某个对象所调用,让这个函数有点名不副实的样子,而且当对象如果需要很多方法,就需要定义同样多的全局变量。这样对象的封装就毫无意义可言。这些问题我们都可以通过原型模式(Prototype)来解决。
原来一山更比一山高啊,这世外高人第一次见..
Person.prototype.sayName = function (){document.write (this.name);};
与之前的:
Function sayName(){Document.write(this.name);}
相比,第二个好low!
那么这位世外高人有什么用呢?
废话不多说上代码:
personA.sayName = function(){document.write("personA:"+this.name+"<br/>");}//对父对象中的方法进行复写,personA是person函数实例化出的一个新对象
哇!QAQ
本期的风趣的JavaScript面向对象课程就结束啦,谢谢大家的浏览和指正!我们下期再见!
转载于:https://www.cnblogs.com/ldw-blogs/p/7567680.html
风趣的JavaScript面向对象入门课程一相关推荐
- JavaScript面向对象入门
什么是JavaScript? 我们可以从几个方面去说JavaScript是什么: 基于对象 javaScript中内置了许多对象供我们使用[String.Date.Array]等等 javaScrip ...
- html5+css+javascript深入学习实录pdf,HTML5+CSS3+JavaScript从入门到精通 微课精编版.pdf...
作 者 :前端科技 出版发行 : 北京:清华大学出版社 , 2018.08 ISBN号 :978-7-302-50220-3 页 数 : 529 原书定价 : 79.80 主题词 : 超文本标记语言- ...
- 视频教程-JavaScript从入门到进阶视频课程-JavaScript
JavaScript从入门到进阶视频课程 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从 ...
- JavaScript面向对象实现-坦克大战(附前端全套学习路线)
[课程简介] 使用javascript+面向对象实现一个坦克大战游戏,让更多的同学能更加深入地理解面向对象思想. [主讲内容] 1. 讲解什么是面向对象,javascript中如何实现面向对象 2. ...
- JavaScript基础入门-陈璇-专题视频课程
JavaScript基础入门-397人已学习 课程介绍 本课包括ECMAScript.流程控制.函数.内置对象.JS调试.JS面试内容,从零带你逐步提升JS技能! 课程收益 了 ...
- 视频教程-javascript零入门实战系列-JavaScript
javascript零入门实战系列 7年php开发经验,国内某大型培训机构项目经理,曾授课程:php,ecshop二次开发,ThinkphpBootstrap商城,html,html5,css,css ...
- JavaScript从入门到精通[文章列表联接]
·JavaScript从入门到精通:更复杂的交互 (1月30日10:7) ·JavaScript从入门到精通:Web页面信息交互 (1月30日10:3) ·JavaScript从入门到精通:窗口及输入 ...
- JavaScript从入门到放弃 -(三)ES5新增方法及商品查询案例
目录 1. ES5新增方法概述 2. 数组方法 2.1 forEach方法 2.2 filter 筛选数组方法 2.3 some方法 3. 查询商品案例 3.1 HTML结构和CSS样式 3.2 准备 ...
- JavaScript 面向对象编程(三) —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 系列笔记: JavaScript 面 ...
最新文章
- httpclient工具类,post请求发送json字符串参数,中文乱码处理
- Codeforces 987C. Three displays(o(n^2))
- SAP Fiori应用里日期格式的显示奥秘
- android studio 使用开源库
- python中collections中的counter类_了解Python的collections.Counter类型
- 网站降权原因解析 -转
- 【优化算法】人工生态系统优化算法(AEO)【含Matlab源码 023期】
- 从零开始学算法 - 快速排序
- 一文带你了解JDK动态代理的原理
- 摄像头云台的设计,组装与使用方法
- mysql frm myd myi 恢复_恢复 - 如何从.myd,.myi,.frm文件恢复MySQL数据库
- Hive分组统计前top N条记录
- 基于.net的大型web开源免费erp
- 数字电路实验环境 (Quartus II 9.0)
- 用js给html添加样式
- Jenkins 添加侧边栏按钮链接 Sidebar Link插件
- 收藏的技术博客链接(不断更新)
- IOS 应用内打开三方地图app直接导航(高德坐标)
- 移动式自动气象站优势
- JSP对象,JavaBean,Servlet简易教程