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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
围观tangram js库
Dec 28 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
小程序中的箭头函数的具体使用
Jun 19 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读取csv文件并输出的方法
2015/03/14 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python编写一个闹钟功能
2017/07/11 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python sys模块常用方法解析
2020/02/20 Python
如何在python中实现线性回归
2020/08/10 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
个人求职信范例
2014/01/29 职场文书
2016年父亲节寄语
2015/12/04 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
python实现自定义日志的具体方法
2021/05/28 Python