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 相关文章推荐
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP计数器的实现代码
2013/06/08 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php5.3 注意事项说明
2013/07/01 PHP
万能的php分页类
2017/07/06 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python函数中的函数(闭包)用法实例
2016/03/15 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python执行时间的几种计算方法
2020/07/31 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Android面试题及答案
2015/09/04 面试题
《听鱼说话》教学反思
2014/02/15 职场文书
吨的认识教学反思
2014/04/27 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
出纳岗位职责范本
2015/03/31 职场文书
记者节感言
2015/08/03 职场文书
感恩教师节主题班会
2015/08/12 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书