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中的常见排序算法
Mar 27 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 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采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python多进程并行代码实例
2019/09/30 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
岗位职责风险点
2014/03/12 职场文书
食品工程专业求职信
2014/06/15 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
TV动画《间谍过家家》公开PV
2022/03/20 日漫
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python