在这个看脸的世界,该如何优雅的创建JS对象
Javascript是一门解释型的语言,是基于对象的,严格来说并不怎么符合的面向对象的标准,显著的特点就是函数就是“一等对象”,与传统的面向对象语言不同的时,Javascript有“一千种”方法来创建对象,(尽管猿们找个对象的方法基本为零)。《Js高程》为我们讲解了多种创建对象的方法,这些方法之间并没有优劣,只要在具体的环境下选择合适的方法即可。
1.对象字面量
var mygirl={
name:"js",
age:"24",
shopping:function(){
console.log("give me money!")
}
}
2. Object构造函数
var mygirl=new Object();
mygirl.name="js";
mygirl.age=24;
mygirl.shopping=function(){
console.log("give me money!")
}
var mygirl={};
mygirl.name="js";
mygirl.age=24;
mygirl.shopping=function(){
console.log("give me money!")
}
3.工厂模式创建对象
function createMygirl(name, age)
{
var o =new Object();
o.name=name;
o.age=24;
o.shopping=function()
{
console.log("give me money!")
};
return o;
}
var mygirl=createMygirl("JS",24);
数次地调用这个函数,而每次它都会返回一个包含两个属性一个方法的对象。
4.自定义构造函数模式创建对象
function Girl(name, age)
{
this.name=name;
this.age=24;
this.shopping=function()
{
console.log("give me money!")
};
}
var mygirl=new Girl("JS",24);
var yourgirl=new Girl("HTML",23);
- (1) 创建一个新对象;
- (2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
- (3) 执行构造函数中的代码(为这个新对象添加属性);
- (4) 返回新对象。
特点:实例上的同名函数不能共享,即
alert(mygirl.shopping == yourgirl.shopping);//false
5. 使用原型模式创建对象
function Girl(){
}
Girl.prototype.name="JS";
Girl.prototype.age=24;
Girl.prototype.friends=["girl1","girl2"];
Girl.prototype.shopping=function()
{
console.log("走起,闺蜜们"+this.friends);
//叫上闺蜜一起败家
};
var mygirl=new Girl();
mygirl.friends.push("girl3");
mygirl.shopping();//走起,闺蜜们girl1,girl2,girl3
var yourgirl=new Girl();
yourgirl.shopping();//走起,闺蜜们girl1,girl2,girl3
6. 组合使用原型模式和构造函数创建对象(my beauty)
function Girl(name, age)
{
this.name=name;
this.age=24;
this.friends=["girl1","girl2"];
}
Girl.prototype.shopping=function()
{
console.log("走起,闺蜜们"+this.friends);
//叫上闺蜜一起败家
};
var mygirl=new Girl("JS",24);
var yourgirl=new Girl("HTML",25);
mygirl.friends.push("girl3");
console.log(mygirl.friends);//[ 'girl1', 'girl2', 'girl3' ]
console.log(yourgirl.friends);//[ 'girl1', 'girl2' ]
console.log(mygirl.friends===yourgirl.friends);//false
console.log(mygirl.shopping===yourgirl.shopping);//true
7.动态原型模式
function Girl(name, age)
{
this.name=name;
this.age=24;
if(typeof this.sayName!="function"){
Girl.prototype.shopping =function(){
console.log("give me money!")
};
}
}
var mygirl=new Girl("JS",24);
mygirl.shopping();
8.寄生构造函数模式
function Girl(name, age)
{
var o =new Object();
o.name=name;
o.age=age;
o.shopping=function()
{
console.log("give me money!")
};
return o;
}
var mygirl=new Girl("kevin",24);
functionSpecialArray(){
//创建数组
var values =newArray();
//添加值
values.push.apply(values, arguments);
//添加方法
values.toPipedString =function(){
returnthis.join("|");
};
//返回数组
return values;
}
var colors =newSpecialArray("red","blue","green")
alert(colors.toPipedString());//"red|blue|green"
9.稳妥构造函数模式
function Girl(name, age,bestfriend)
{
//可以在这里定义私有变量和函数
var heigth=1.75;
var o =new Object();
o.shopping=function()
{
console.log("走起,闺蜜们"+bestfriend);
//叫上闺蜜一起败家
};
return o;
}
var mygirl=Girl("kevin",24);
特点:一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数。在以这种模式创建的对象中, 除了使用 shopping() 方法之外,没有其他办法访问 bestfriend 的值(闭包)。
在这个看脸的世界,该如何优雅的创建JS对象的更多相关文章
- 【Unity3D】Unity3D开发《我的世界》之二、创建一个立方体
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_02.html 这一篇的内容比较简单,因为所有理论内容都在上一篇中讲到了.但有两点需 ...
- 且看一文梳理VS2019中dll的创建使用
动态链接库(dll) Windows下有静态链接(lib)库和动态链接库(dll)两种共享代码的方式. 本文将介绍dll的应用场景,以及在vs2019平台下的生成和使用. 今天的笔记内容说的是平时经常 ...
- 前端知识杂烩(Javascript篇)
1. JavaScript是一门什么样的语言,它有什么特点?2.JavaScript的数据类型都有什么?3.请描述一下 cookies,sessionStorage 和 localStorage 的区 ...
- Android Studio 单刷《第一行代码》系列 03 —— Activity 基础
前情提要(Previously) 本系列将使用 Android Studio 将<第一行代码>(书中讲解案例使用Eclipse)刷一遍,旨在为想入坑 Android 开发,并选择 Andr ...
- RecyclerView 和 ListView 使用对比分析
原文地址:http://blog.coderclock.com/2016/08/08/android/RecyclerView%20%E5%92%8C%20ListView%20%E4%BD%BF%E ...
- 让 Logo "飞" 出屏幕
让 Logo "飞" 出屏幕 推荐序 本文介绍了一种思路,即利用矢量工具来生成动画的关键代码,然后进一步制作成完整的动画效果,感谢作者授权转载. 作者介绍:一缕殇流化隐半边冰霜 ...
- hdu 5073 Galaxy(2014 鞍山现场赛)
Galaxy Time Limit: 2000/1000 MS (J ...
- Android RecyclerView与ListView比较
RecyclerView 概述 RecyclerView 集成自 ViewGroup .RecyclerView是Android-support-V7版本中新增的一个Widgets,官方对于它的介绍是 ...
- Python爬虫之抓取豆瓣影评数据
脚本功能: 1.访问豆瓣最受欢迎影评页面(http://movie.douban.com/review/best/?start=0),抓取所有影评数据中的标题.作者.影片以及影评信息 2.将抓取的信息 ...
随机推荐
- spoj 371 Boxes
N个盒子围成一圈,第i个盒子初始时有Ai个小球,每次可以把一个小球从一个盒子移到相邻的两个盒子之一里.问最少移动多少次使得每个盒子中小球的个数不超过1. ΣAi<=N.1<=N<=1 ...
- 彻底删除MySQL
安装mysql数据库.最后一步APPLY SECURITY SETTINGS总是失败.感觉很郁闷.上网找了教程,有前四步,一一做了,发现还是不对.最近突然发现在环境变量那边的路径还没有卸载干净.可能我 ...
- 怪物AI之发现玩家(视觉范围发现系列)
在网上找到一些资料参考,然后写写自己的想法. 这里感谢MOMO等大神. 我们用玩家检测怪物的方法来测,这样比较试用与弱联网游戏,每次在同步玩家的时候来判断玩家与怪物的位置. 这里给出两个处理方式: 1 ...
- 求1...n中因子最多的数
Problem 求[1..N]中素因子数最多且最小的数n,N充分大. Solution 将任意自然数n (n>2) 分解 n=p1^k1 * p2^k2 * p3^k3 * ... * Pm^k ...
- K米点歌APP评测
K米APP评测 产品简介 K米点歌是一款免费的社交K歌手机应用,其手机点歌功能主要在KTV.夜总会,酒吧等K歌场所中使用,当前提供iPhone版本及安卓版本下载使用.——百度百科 评测版本 K米点歌4 ...
- poj3468 A Simple Problem with Integers(zkw区间修改模板)
此题是一道线段树的裸题,这里只是为了保存我的zkw线段树模板 #include <cstdio> #include <cstring> #include <iostrea ...
- CSS-border属性制作小三角
1--三角向上下左上.右上.右下.左下这四个方向突出的样式 向左上角突出: border-color: transparent transparent transparent #FFCC00; bor ...
- Sql Server FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- SQL Server基础知识
1.SQL Server表名为什么要加方括号? 这个不是必须要加,但表名或字段名如果引用了sqlserver中的关键字,数据库会不识别这到底是关键字还是表名(或字段名)时就必须要加. 比如,一个表名叫 ...
- Linux/CentOS优化配置 汇总
[强烈要求做的]CentOS启用sudo,禁用root远程登录 Linux命令行修改IP.网关.DNS.主机名 的方法 Linux开机直接进入“命令行”模式 更改CentOS 6.x yum源为国内1 ...