js对象的创建
一、通过对象直接量来创建
var emptyt={}; //相当于var empty=new Object;
//如果属性名中包含空格、连字符(-)、还有关键字,保留字时,要用字符串表示
var book={
“main title”:“javascript”,
“sub-title”:“The Definitive Guide”, //属性名包含连字符
“for”:“all audiences”, //属性名包含保留字
author:{
firstname:“David”,
surname:“Flanagan”,
}
}
二、通过new+构造函数创建对象
构造函数可以是js中的内置构造函数和自定义的构造函数
var o=new Object();//创建一个空对象 和{}一样
var a=new Array();//创建一个空数组和[]一样
var d=new Date();//创建一个表示当前时间的对象
var r=new RegExp(‘js’);//创建一个可以进行模式匹配的RegExp对象
三、Object.create()创建对象
Object.creat()是一个静态函数,不是提供给某个对象调用的方法,使用时,需要传递原型对象(及要继承的对象),第二个参数可选,用以对对象的属性进行进一步描述。
var o1=Object.create({x:1,y:2}); //o1继承了属性x和y
可以通过传入参数null创建一个没有原型对象的新对象,通过这种方式创建的对象不继承任何东西
var o2=Object.create(null);//o2不继承任何属性和方法
如果想创建一个普通的空对象(比如通过{ }或者new Object()创建的对象);需要传入Object.prototype;
var o3=Object.create(Object.prototype); //o3和{}、new Object一样
四、工厂模式
工厂模式非常直观,将创建对象的过程抽象为一个函数,用函数封装以特定接口创建对象的细节,通俗的讲,工厂模式就是将创建对象的语句放在一个函数里面,通过传入参数来创建特定对象,最后返回创建的对象,工厂模式虽然可以创建多个相似的对象,但是不能解决对象标识的问题,即知道一个对象的类型。
function createStudent(name,sex,grade)
{
var o=new Object( );
o.name=name;
o.sex=sex;
o.grade=grade;
o.sayName=function()
{
console.log(this.name)
}
return o;
}
var s1=createStudent(“david”,“女”,“15”);
五、构造函数模式
像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
function Student(name,sex,grade)
{
this.name=name;
this.sex=sex;
this.grade=grade;
this.sayName=function()
{
console.log(this.name);
}
}
var s1=new Student(“we”,“女”,“17”);
注意:构造函数的首写字母必须大写,以便与普通函数区分开来。
此外要注意,要创建Student的实例,必须使用new操作符,创建的实例对象将有一个constructor(构造器属性),指向Person构造函数。
调用构造函数创建对象主要经历了下面几个步骤:
1、创建一个新对象;
2、把构造函数的作用域赋给新的对象(因此this就是指向新的对象实例);
3、执行构造函数中的代码;
4、返回新对象;
构赞函数的缺点:
每个方法都要在每个实例上面创建一遍,函数即是对象,因此每定义一个函数,也就实例化了一个对象。所以调用同一个构造函数所创建的不同实例对象中的方法是不相等的。
var s3 = new Student('唐僧','male',3);
var s4 = new Student('白骨精','female',4);
s3.sayName();
s4.sayName();
console.log(s3.sayName == s4.sayName); //结果为false 所以两个方法是两个不同的方法
六、原型模式
js中,每个对象都有一个prototype属性,原型对象,原型对象包含了可以由特定类型的所有实例对象的共享的属性和方法。
使用原型模型可以让所有的实例对象共享原型对象中的属性和方法。
function Student_1(){
}
Student_1.prototype={
name:“wangyue”,
sex:“女”,
class:5,
sayName:function()
{
console.log(this.name)
}
}
var s1=new Student_1();
var s2=new Student_2();
console.log(s1.sayName==s2.sayName);
了解原型后可以继续在实例对象上面添加属性和方法;
s1.name=“john”;
console.log(s1.name);打印出来是john;
当要读取某个对象的属性时,都会执行一次搜索,搜索首先从对象实例本身开始,如果在实例中找到了这个属性,则搜索结束,返回实例属性的值;若实例上没有找到,则继续向对象的原型对象延伸,搜索对象的原型对象,若在原型对象上找到了,则返回原型上相应属性的值,若没有找到,则返回undefined。因此,实例对象属性会覆盖原型对象上的同名属性,所以上面第二行代码输出的是John。
Object.getPrototypeOf(object)方法返回参数对象的原型对象。
Object.keys(object)方法返回对象上可枚举的实例属性。
Student_1.prototype.friends = ['aa','bb'];
console.log('s6的朋友' + s6.friends);
s5.friends.push('cc');
console.log('s5的朋友' + s5.friends);
console.log('s6的朋友' + s6.friends);
问题来了,我们只想改变s5的朋友列表,但由于原型模式的共享本质,s6的朋友列表也随之改变了。因此,很少单独使用原型模式。
七、组合使用构造函数和原型模式
构造函数模式用于定义实例属性,原型模式则用于定义方法和共享的属性。这种混合模式不仅支持向构造函数传入参数,还最大限度地节约了内存,可谓是集两模式之长。示例代码如下:
function Student(name,sex,grade){
this.name = name;
this.sex = sex;
this.grade = grade;
}
Student.prototype.sayName = function(){
console.log(this.name);
}
Student.prototype.school = 'Joooh school';
除了以上几种常见的模式外,批量创建对象的方式还有
动态原型模式:仅在第一次调用构造函数时,将方法赋给原型对象的相应属性,其他示例的处理方式同构造函数模式
寄生构造函数模式:仅仅封装创建对象的代码,然后再返回新创建的对象,仍使用new操作符调用
稳妥构造函数模式:没有公共属性,只有私有变量和方法,以及一些get/set方法,用以处理私有变量。
js对象的创建的更多相关文章
- js 对象的创建方式和对象的区别
js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...
- js对象的创建与原型总结
//1 新建对象 var box = new Object(); box.name = "lee"; box.age = 100; box.run = function(){ re ...
- js对象的创建模式
方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法 * 适用场景: 起始时不确定对象内部数据 * 问题: 语句太多 /* 一个人: name:" ...
- JS对象的创建与使用
本文内容: 1.介绍对象的两种类型: 2.创建对象并添加成员: 3.访问对象属性: 4.利用for循环枚举对象的属性类型: 5.利用关键字delete删除对象成 ...
- js对象的几种创建方式和js实现继承的方式[转]
一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...
- JS对象与PHP对象的对比
一.对象的创建与访问 1.JS对象的创建与访问 //方式一(通过内置构造函数创建后添加属性) var obj = new Object(); obj.name = 'Lucy'; //通过点添加属性 ...
- javascript基础-js对象
一.js对象的创建 1.普通最简单的方式 var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = ...
- 浅谈Js对象的概念、创建、调用、删除、修改!
一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说 世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象! 1.javascript中的所有事 ...
- js中对象的创建
json方式,构造函数方式,Object方式,属性的删除和对象的销毁 <html> <head> <title>js中的对象的创建</title> &l ...
随机推荐
- 如何生成SSH key及查看SSH key
只适用于Mac和windows下的Git Bash操作界面. 一.检查本地是否有SSH Key存在 在终端输入 ls -al ~/.ssh 如果终端输出的是: No such file or dire ...
- JAVA对mongodb的基本操作
public class test3 { //连接数据库(不需要验证,用于测试连接本地的mongodb) public static MongoDatabase getDatabase(String ...
- 小程序——如何引入外部js
当写小程序需要引入一些额外的js文件时,可以这样: 一.先把外部js用一个函数封闭起来: test.js function myfunc() { console.log("myfunc... ...
- jQuery-4.动画篇---上卷下拉效果
jQuery中下拉动画slideDown 对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果.之前学过了show方法,show方法在显示的过程中也可以有动画,但是.show()方法 ...
- github 和 jupyter
放在github上的.ipynb文件可以用jupyter nbviewer来查看和分享. nbviewer首页: http://nbviewer.jupyter.org/ 输入github的名字或网址 ...
- WEBBASE篇: 第十篇, JavaScript知识5
JavaScript知识5 <!doctype html> <html lang="en"> <head> <meta charset=& ...
- 八个commit让你学会爬取京东商品信息
我发现现在不用标题党的套路还真不好吸引人,最近在做相关的事情,从而稍微总结出了一些文字.我一贯的想法吧,虽然才疏学浅,但是还是希望能帮助需要的人.博客园实在不适合这种章回体的文章.这里,我贴出正文的前 ...
- Hive的初识
Hive是构建于Hadoop上的数据仓库基础框架,它提供了以下功能: 可通过SQL轻松的访问数据,从而实现数据仓库的任务.如提取/转换/加载,报告和数据分析. 对各种数据格式施加结构. 访问存储在HD ...
- MongoDB慢查询性能分析
最近,长期运营后的港台服出现一个问题,web充值很慢,用gm指令查询玩家信息也很慢.最后定位到MongoDB查询也很慢. 刚开始定位的时候,运营SA直接查指定的玩家,并反映很慢,就猜测是索引的问题 ...
- XMind 8 pro update 7激活方法
激活过程 0.下载XMindCracker.(自行百度下载)1.断网,使用修改hosts方法,在最后一行添加0.0.0.0 www.xmind.net2.将XMindCrack.jar拷贝到XMind ...