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 相关文章推荐
sogou地图API用法实例教程
Sep 11 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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模板函数 正则实现代码
2012/10/15 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python的迭代器和生成器使用实例
2015/01/14 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
如何用python免费看美剧
2020/08/11 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
副总经理工作职责
2013/11/28 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
火车来了教学反思
2014/02/11 职场文书
校园活动宣传方案
2014/03/28 职场文书
职工年度考核评语
2014/12/31 职场文书
会议通知范文
2015/04/15 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书