一、通过对象直接量来创建

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对象的创建的更多相关文章

  1. js 对象的创建方式和对象的区别

    js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...

  2. js对象的创建与原型总结

    //1 新建对象 var box = new Object(); box.name = "lee"; box.age = 100; box.run = function(){ re ...

  3. js对象的创建模式

    方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法 * 适用场景: 起始时不确定对象内部数据 * 问题: 语句太多 /* 一个人: name:" ...

  4. JS对象的创建与使用

    本文内容:     1.介绍对象的两种类型:     2.创建对象并添加成员:     3.访问对象属性:     4.利用for循环枚举对象的属性类型:     5.利用关键字delete删除对象成 ...

  5. js对象的几种创建方式和js实现继承的方式[转]

    一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...

  6. JS对象与PHP对象的对比

    一.对象的创建与访问 1.JS对象的创建与访问 //方式一(通过内置构造函数创建后添加属性) var obj = new Object(); obj.name = 'Lucy'; //通过点添加属性 ...

  7. javascript基础-js对象

    一.js对象的创建 1.普通最简单的方式 var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = ...

  8. 浅谈Js对象的概念、创建、调用、删除、修改!

    一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说    世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象!    1.javascript中的所有事 ...

  9. js中对象的创建

    json方式,构造函数方式,Object方式,属性的删除和对象的销毁 <html> <head> <title>js中的对象的创建</title> &l ...

随机推荐

  1. React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用

    import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigato ...

  2. 线性求第k大

    快排变种. 快排每次只进行部分排序,进入左边或者右边或者当前mid就是答案. 据说期望值是O(n) 然后STL中的 nth_element也是用这个思想. #include <cstdio> ...

  3. 《Java编程思想》读书笔记-基本规范、注释、static关键字、import关键字

    扫一扫加我的微信公众号,和我一起打好Java的基础 本文作为构建第一个Java程序的番外篇二,主要跟大家伙儿从浅层次的探讨下Java中的关键字import和static,此外为了让我们的代码可读性更强 ...

  4. dee

    窗口居中def center(self): screen = QDesktopWidget().screenGeometry() size = self.geometry() self.move((s ...

  5. Jmeter接口测试+压力测试

    链接推荐:https://blog.csdn.net/github_27109687/article/details/71968662

  6. Valudate.js格式

    jQuery(function($) { $("#form").validate({ rules:{ username:{required:true }, Loginname:{ ...

  7. 从原型链探究Javascript这么火的原因

    首先,此文是对于javascript原型链的一些私人见解,若能博君会心一笑,在下荣幸之至! 为了阐述我的理解,首先提前声明一些前置知识,欢迎指正: 栈内存和堆内存: 栈内存每个地址分配的地址长度较窄, ...

  8. jQuery之基础核心(demo)

    jQuery之基础核心     作者的热门手记 jQuery之基础核心(demo)   本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

  9. POJ1037 A decorative fence

    题意 Language:Default A decorative fence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 84 ...

  10. 20175202 《Java程序设计》第九周学习总结

    20175202 2018-2019-2 <Java程序设计>第九周学习总结 教材知识点总结 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系统,简称 ...