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的checkbox下拉框插件代码
Jun 25 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
微信小程序 转发功能的实现
Aug 04 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年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
xtree.js 代码
2007/03/13 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python中协程用法代码详解
2018/02/10 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
Django自带的用户验证系统实现
2020/12/18 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
大学军训感言800字
2014/02/27 职场文书
美术指导求职信
2014/03/17 职场文书
高中同学会活动方案
2014/08/14 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
数据设计之权限的实现
2022/08/05 MySQL