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 相关文章推荐
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Angularjs的启动过程分析
Jul 18 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/03/15 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP中cookie知识点学习
2018/05/06 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python群发邮件实例代码
2014/01/03 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
详解Python中的路径问题
2020/09/02 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
学生个人求职自荐信格式
2013/09/23 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
市场部岗位职责范本
2015/04/15 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python