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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
详细分析vue响应式原理
Jun 22 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP使用数组实现队列
2012/02/05 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python操作MySQL数据库的方法
2018/06/20 Python
python实现一组典型数据格式转换
2018/12/15 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python一些性能分析的技巧
2020/08/30 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
小加工厂管理制度
2014/01/21 职场文书
安全教育演讲稿
2014/05/09 职场文书
关爱留守儿童标语
2014/06/18 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2019年最新借条范本!
2019/07/08 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
mysql数据库隔离级别详解
2022/06/16 MySQL