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』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
JavaScript 常用函数
2009/12/30 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python如何实现递归转非递归
2021/02/25 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
区域销售经理岗位职责
2013/12/10 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
校庆标语集锦
2014/06/25 职场文书
护士自我推荐信范文
2015/03/24 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
MySQL创建管理KEY分区
2022/04/13 MySQL
索尼ICF-5900W收音机测评
2022/04/24 无线电