JavaScript 面向对象基础简单示例


Posted in Javascript onOctober 02, 2019

本文实例讲述了JavaScript 面向对象。分享给大家供大家参考,具体如下:

JavaScript  面向对象

  • this:this代指对象(python self)
  • 对象 = new 函数():创建对象:添加“new 函数()”相当与创建对象
  • 类名:prototype={方法} : 创建类原型

类:

<script>
function Foo(n){
  this.name = n;
  this.sayName = function(){
    console.log(this.name)
  }
}
var obj1 = new Foo('3water');
obj1.name
obj1.sayName()
var obj2 = new Foo('三水点靠木');
obj2.name
obj2.sayName ()
</script>

运行结果:

JavaScript 面向对象基础简单示例

:obj1~2 对象内存里会重复调用this.sayName,从而增加内存损耗。
:创建obj对象并传入参数、obj1.name就是we。
:obj1.sayNmae() 执行方法 调用obj1的name等于we。

类原型:

<script>
function Foo(n){
  this.name = n;
}
// Foo的原型
Foo.prototype = {
  'sayName': function(){
  console.log(this.name)
  }
}
var obj1 = new Foo('欢迎访问');
obj1.name
obj1.sayName()
var obj2 = new Foo('3water.com');
obj2.name
obj2.sayName()
</script>

运行结果:

JavaScript 面向对象基础简单示例

:每一个对象内只封装了一个name。
:调用obj1.sayName()时会先找Foo类,然后在去Foo的原型里找sayName。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
vue 中的动态传参和query传参操作
Nov 09 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 #Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 #Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 #Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 #Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 #Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 #Javascript
javascript实现摄像头拍照预览
Sep 30 #Javascript
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python list转dict示例分享
2014/01/28 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python中return语句用法实例分析
2015/08/04 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
flask应用部署到服务器的方法
2019/07/12 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
Python jiaba库的使用详解
2021/11/23 Python
A22国内电台短波广播频率表
2022/05/10 无线电