javascript面向对象创建对象的方式小结


Posted in Javascript onJuly 29, 2019

本文实例讲述了javascript面向对象创建对象的方式。分享给大家供大家参考,具体如下:

方式一:通过内置Object对象的方式创建 然后通过点语法,动态给对象创建属性,方法

var o1 = new Object();
o1.name = 'Tom';
o1.sing = function() {
 console.log('I am singing');
}

方式二:通过字面量json形式创建对象

var o2 = {
 "name":"jackson",
 "age":"10",
 "say":function(){
  console.log("say hi");
 };
};

方式三:通过构造函数创建

var o3 = function() {
 this.name = "Lucy",
 this.age = "10",
 this.say = function() {
  console.log("say hello");
 }
}

方式四:通过原型创建

var o4 = function() {}
o4.prototype = {
 "name":"Taylor",
 "age":10,
 "say":function(){
  console.log("say h1");
 }
}

方式五:通过原型和构造函数混合的形式创建(推荐使用这种,原因:尽量将方法定义为原型方法,原型方法避免了每次调用构造函数时对属性或方法的构造,节省空间,创建对象快)

var o5 = function() {
 this.name = 'James';
 this.age = 10;
}
o5.prototype = {
 "say":function() {
   console.log("say hi");
 }
}

方式六:拷贝模式创建对象

// 先要有一个拷贝模块
function extend(target,source){
 for(var k in source){
  target[k] = source[k];
 }
 return target;
};
var o6 = {
 "name":"o6",
 "age":10
}
var o7 = {
 "say":function() {
  console.log('say hi');
 }
}
// o6拷贝o7的方法,然后构建成一个新的对象
var o8 = extend(o6,o7);
o8.say(); // say hi

方式七:通过第三方库来创建对象

有 base2.js  和 simplejavascriptinheritance.js 来实现, 网上有资料。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
微信小程序实现多选功能
Nov 04 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 #Javascript
pageGroup.js实现分页功能
Jul 27 #Javascript
laypage+SpringMVC实现后端分页
Jul 27 #Javascript
You might like
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python单例模式实例解析
2018/08/28 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
行政文员岗位职责
2013/11/08 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
亮化工程实施方案
2014/03/17 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
保护动物的宣传语
2015/07/13 职场文书
Python基础之进程详解
2021/05/21 Python