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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
Javascript Throttle & Debounce应用介绍
Mar 19 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
axios学习教程全攻略
Mar 26 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
jquery实现轮播图特效
Apr 12 jQuery
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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 常用类汇总 推荐收藏
2010/05/13 PHP
php array的学习笔记
2012/05/16 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
phpfpm的作用和用法
2019/10/10 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python3多线程操作简单示例
2018/05/22 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
《中华少年》教学反思
2014/02/15 职场文书
同学会邀请函模板
2015/01/30 职场文书
病人慰问信范文
2015/02/15 职场文书