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实现图片轮播的方法
Jul 31 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
WAF的正确bypass
2017/01/05 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
js表单登陆验证示例
2016/10/19 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
图解javascript作用域链
2019/05/27 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python 实现按对象传值
2019/12/26 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
机电专业个人求职信范文
2013/12/30 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
刘胡兰观后感
2015/06/16 职场文书
新课程改革心得体会
2016/01/22 职场文书
python 下载文件的几种方式分享
2021/04/07 Python