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 相关文章推荐
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JS将unicode码转中文方法
May 08 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
js基于div丝滑实现贝塞尔曲线
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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python中class的定义及使用教程
2019/09/18 Python
python默认参数调用方法解析
2020/02/09 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
安全生产网格化管理实施方案
2014/03/01 职场文书
护士个人自我鉴定
2014/03/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
Python实现信息管理系统
2022/06/05 Python