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下数值型比较难点说明
Jun 07 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JavaScript Promise启示录
Aug 12 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
swiper自定义分页器的样式
Sep 14 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堆栈与列队的学习
2013/06/21 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
同学聚会主持词
2014/03/18 职场文书
教师新年寄语
2014/04/03 职场文书
民事授权委托书范文
2014/08/02 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
导游词之山东孔庙
2019/11/04 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
python 实现体质指数BMI计算
2021/05/26 Python
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL