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 ...
随机推荐
- js string类型时间转换成Date类型
方法一: var t = "2015-03-16";var array = t.split("-");var dt = new Date(array[0], ...
- Mac pip install mysql-python
首次在mac os 下,用pip install MySQL-Python时经常出现如下错误: sh: mysql_config: command not foundTraceback (most r ...
- webpack 代码分割一点事
webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是c ...
- Vue基础之内部指令(上)
v-if.v-else-if.v-else以及v-show 条件指令v-if.v-else-if.v-else 类似于JavaScript里的if.else-if.else,这三个指令根据表达式的值对 ...
- 1(3)IO流------字符流
一.分类 字节流(不适用于文本) InputStream OutputStream 字符流 Reader Writer 二.字符流 按照字符为单位,英文1-1,中文看是UTF-8编码还是GBK编码 字 ...
- PA教材提纲 TAW10-2
Unit1 Introduction to the ABAP Dictionary(ABAP字典介绍) 1.1 Describing the ABAP Dictionary(描述ABAP字典) ABA ...
- oracle数据库连接缓慢
今天连接数据库时非常的慢,大概将近1分钟,才能连上,感觉不对,登录数据库所在的服务器,进行检查,常规的内存.硬盘.CPU全都正常,然后想要进入oracle用户时报错了:su: cannot set u ...
- Mysql链接问题
链接MySQL时报错Client does not support authentication protocol requested by server; consider upgrading My ...
- SDL中 so库的使用
用到的项目:Tocy-Android-SDLv2 JAVA层:只有一个 SDLActivity.java 路径\Android-SDLv2\src\org\libsdl\app 项目简单分析: 默认在 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...