一、 什么是对象

  1. 对象是包含一组变量(称为属性)和函数(称为方法)的集合的实例。
  2. javascript中所有事物都是对象
  3. javascript有很多内建对象
  4. javascript允许自定义对象
  5. 对象只是带有属性和方法的特殊数据类型
  6. 对象的属性是存储装载信息(属性值)的,可以理解为变量
  7. 对象的方法是执行其内部所包含的代码块的,可以理解为函数

注:以下所指对象均为自定义对象

二、 怎么创建对象

1、实例创建

  1. //创建一个对象的实例
  2. var handsomeMan =newObject();
  3. handsomeMan.name='wyang';

字面量写法如下:

  1. var handsomeMan ={};

2、工厂模式

  1. function handsomeMan(){
  2. var o =newObject();
  3. o.name ='wyang';
  4. o.sayName =function(){
  5. console.log(this.name);//wyang
  6. }
  7. return o;
  8. }
  9. var me = handsomeMan();//经典工厂模式
  10. var me =new handsomeMan();//混合工厂模式
  11. me.sayName();

为了避免重复创建sayName方法,把上面的代码做了如下改进:

  1. var sayName =function(){
  2. returnthis.name;//wyang
  3. }
  4. functionHandsomeMan(){
  5. var o =newObject();
  6. o.name ='wyang';
  7. o.sayName = sayName;
  8. }
  9. var me =HandsomeMan();
  10. me.sayName();

3、构造函数

  1. functionHandsomeMan(){
  2. this.name ='wyang';
  3. this.sayName =function(){
  4. console.log(this.name);//wyang
  5. }
  6. }
  7. var me =newHandsomeMan();
  8. me.sayName();

为了避免重复创建sayName方法,把上面的代码做了如下改进:

  1. var sayName =function(){
  2. returnthis.name;//wyang
  3. }
  4. functionHandsomeMan(){
  5. this.name ='wyang';
  6. this.sayName = sayName;
  7. }
  8. var me =newHandsomeMan();
  9. me.sayName();

4、原型模式

  1. var sayName =function(){
  2. returnthis.name;//wyang
  3. }
  4. functionHandsomeMan(){};
  5. HandsomeMan.prototype.name ='wyang';
  6. HandsomeMan.prototype.sayName = sayName;
  7. var me =newHandsomeMan();
  8. me.sayName();

5、混合模式(构造函数模式+原型模式)

  1. functionHandsomeMan(){
  2. this.name ='wyang';
  3. }
  4. HandsomeMan.prototype.sayName =function(){
  5. console.log(this.name);//wyang
  6. }
  7. var me =newHandsomeMan();
  8. me.sayName();

三、 对象的属性是什么?

属性是存储装载其所对应对象的一些信息的容器;
对象中的属性是无序的,每一个属性都有一个字符串key和对应的 value;
不管设置的属性是否是字符串,javascript都会把它转换为字符串;

1、属性是可以动态添加或删除的。如下:

  1. var obj ={};
  2. obj.x =1;
  3. obj.y =2;

2、对象中的每一个属性都有很多的属性标签,比如:

  1. writable:能否修改属性的值;默认值为true;
  2. enumerable:能否通过for-in循环返回属性(是否可枚举);默认值为true;
  3. configurable:能否删除、重新定义、修改属性特性、把属性修改为访问器属性/数据属性(是否能够配置);默认值为true;
  4. value:属性的数据值;可读写;默认值为undefined;
  5. get/set:
  • 扩展:原型链

  1. functionHandsomeMan(){}
  2. HandsomeMan.prototype.name ='wyang';
  3. //实例化对象
  4. var obj =newHandsomeMan();
  5. obj.age =26;
  6. obj.hobby ='programme';
  7. obj.age //26
  8. obj.hobby //programme
  9. obj.name //wyang

1)、上面的例子我们先定义了一个HandsomeMan的函数对象;HandsomeMan自带了一个prototype属性,它的属性是对象属性;
2)、HandsomeMan.prototype是一个对象;我们把这个对象添加一个属性name并赋值为wyang;
3)、用构造器的方式构造了一个新的对象obj;然后给这个对象添加了两个属性并赋值;然后通过访问这两个属性得到属性值;
4)、obj这个对象的原型会指向构造器的属性也就是HandsomeMan.prototype;
4)、[重点]当用obj.age访问age属性时,发现obj上有age这个属性,所以就会返回26hobby同理;但是当用obj.name来访问name时;发现obj上面没有name,这时它不会停止查找,而是继续向上查找他的原型也就是HandsomeMan.prototype;然后发现有name这个属性;所以返回wyang

如果给obj.name赋值,那么HandsomeMan.prototype.name的值会被修改么?

  1. obj.name ='wangyang';
  2. obj.name //wangyang;
  3. HandsomeMan.prototype.name //wyang

从上面的例子可以看出,如果给obj.name赋值,HandsomeMan.prototype.name的值是不会被修改的。因为obj对象里面有name这个属性,所以不会向上查找;

那么怎么再次通过obj对象拿到原型上的name呢?

  1. delete obj.name;
  2. obj.name //wyang

如上代码,通过删除obj.name后,就可以获得原型上的name;实际上这也就是原型链的继承;

四、 怎么给对象的属性赋值?

  • 键值对结构用“:”赋值;
  • 动态结构用“=”赋值;

五、 如何操作对像的属性?

1、读写对象的属性

  1. var obj ={
  2. name :'wyang',
  3. age :26
  4. }
  5. obj.name;//wyang
  6. obj['age'];//26
  7. obj.hobby ='programme';
  8. obj['eat']='food';//当需要拼接对象的属性名或者用``for in``遍历所有属性的时候用‘[]’,其余的场景推荐使用‘.’;

2、属性异常

  1. var obj ={
  2. age:26
  3. }
  4. obj.name;//undefined
  5. obj.name.hobby //TypeError: Cannot read property 'hobby' of undefined
  6. obj.name.hobby ='programme';//TypeError: Cannot read property 'hobby' of undefined

如果想对obj.name这个属性处理一些事情的话;需要先判断下obj.name是否存在:

  1. var nh;//var nh = obj && obj.name && obj.name.hobby;
  2. if(obj.name){
  3. nh = obj.name.hobby
  4. }

3、删除属性

  1. var obj ={
  2. name :'wyang',
  3. age :26
  4. }
  5. delete obj.name //true
  6. delete obj['age']//true
  7. obj.name //undefined
  8. obj.age //undefined
  9. delete obj.name //如果重复删除已经不存在的属性,不会做任何事情,但是属性已经不存在了,javascript仍然会返回true;

1)、delete 并不代表操作成功,只是表示这个对象上并不存在这个属性;
2)、Object.prototype不能够被删除,因为它的configurable为false;所以删除会返回false;

  • 延伸:全局变量、局部变量、函数声明都不能通过delete被删除;
  1. var a =1;
  2. delete a;//false
  3. function a(){
  4. var b =1;
  5. returndelete b;
  6. }
  7. a()//false
  8. function a(){}
  9. delete a //false
  10. //隐式创建的变量可以被删除(不推荐使用)
  11. a =1;
  12. window.a;//1
  13. delete.a //true

4、检测属性

  1. //检测对象上是否含有某个属性
  2. var obj =newObject;
  3. obj.name ='wyang';
  4. obj.age =26;
  5. 'name'in obj;//true
  6. 'hobby'in obj;//false
  7. 'toString'in obj;//true
  8. obj.hasOwnProperty('name');//true ‘obj’这个对象上包含‘name’这个属性;
  9. obj.hasOwnProperty('toString');//false

从上面的例子可以看出来:in操作符是会通过原型链向上查找的,它是作用于整个原型链的,所以不管是这个对象上的属性还是原型链上的属性都会返回‘true’;hasOwnProperty操作符是针对于当前对象的,不会去通过原型链向上查找;上面例子的‘obj’这个对象上没有包含‘ toString’这个属性;所以返回false;它的原型链上才有‘ toString’这个属性;

  1. //检测对象上的某个属性是否可枚举
  2. obj.propertyIsEnumerable('name');//true
  3. obj.propertyIsEnumerable('toString');//false ‘Object.pertotype’上的大部分标签的‘enumerable’都是false;

5、枚举属性

  1. var obj ={
  2. name :'wyang',
  3. age :26
  4. }
  5. var $property;
  6. for($property in obj){
  7. console.log($property);//name、age
  8. }

上面例子通过for in来枚举当前对象上可枚举的属性;

  1. var o =Object.create(obj);//通过‘ Object.create’来船舰一个新对象,这个对象的原型指向‘obj’;
  2. o.hobby ='programme';//默认可枚举
  3. var $property;
  4. for($property in obj){
  5. console.log($property);//name、age、hobby
  6. }

如果只想处理‘o’这个对象上的属性,不想处理这个对象原型链上的属性呢?

  1. var o =Object.create(obj);
  2. o.hobby ='programme';
  3. var $property;
  4. for($property in obj){
  5. if(obj.hasOwnProperty($property)){    //只枚举当前对象上的属性,过滤掉这个对象原型链上的属性
  6.         console.log($property);//hobby
  7. }
  8. }

6、属性的get/set方法
get:在读取属性时调用的函数,默认值为 undefined
set:在写入属性时调用的函数,默认值为 undefined

  1. var obj ={
  2. name :'wyang',
  3. get age(){
  4. returnnewDate().getFullYear()-1989;
  5. },
  6. set age(val){
  7. console.log('您不能修改年龄为'+val+'岁!!!');
  8. }
  9. }
  10. console.log(obj.age);//26
  11. obj.age =100;//您不能修改年龄为100岁!!!
  12. console.log(obj.age);//26

六、什么是方法

方法是能够在对象上执行的动作。说白了就是包含在对象中的函数

七、怎么定义对象方法

暂且不表

八、如何调用对象的方法?

  1. objectName.methodName()

九、对象标签

对象级别的标签主要有三种:[[proto]]、[[class]]、[[extensible]]
1、原型链是通过proto这个标签来实现的
2、class表示对象是哪一个类型,没有直接的方式去查看或修改它;需要通过间接的手段;
3、extensible表示对象是否可扩展

十、对象序列化

  1. /**
  2. *后端需要一个字符串格式的数据
  3. */
  4. var obj ={name:"wyang",age:26, hobby:["programme","eat"],gf:null,single:true};
  5. JSON.stringify(obj);//"{"name":"wyang","age":26, "hobby":["programme","eat"],"gf":null,"single":true}"
  6. /**
  7. *坑:
  8. *1. 如果序列化的值是'undefined',那么就不会出现在序列化的结果当中
  9. *2. 如果序列化的值是'NaN'、'Infinity',那么会转换为'null'
  10. *3. 如果序列化的值是时间的话,会转换成UTC的时间格式
  11. */
  12. var obj ={name:'wyang',age:26, hobby:['programme','eat'],gf:null,single:true,love:undefined,a:NaN,b:Infinity,c:newDate()};
  13. JSON.stringify(obj);//"{"name":"wyang","age":26, "hobby":["programme","eat"],"gf":null,"single":true,"a":null,"b":null,"c":"Mon Nov 02 2015 11:39:51 GMT+0800 (中国标准时间)"}"
  14. /**
  15. *后端返回一个json格式的数据,变为js对象
  16. */
  17. var obj = JOSN.parse('{"name":"wyang"}');
  18. obj.name //wyang;

javascript第一弹——对象的更多相关文章

  1. [WEB面试题] web前端面试题JavaScript第一弹,个人整理部分面试题汇总

    以下内容仅供参考,成年人不讲对错只讲利弊 1.什么是JavaScript原型链?如何理解 JavaScript中的每个对象都有一个prototype属性,我们称之为原型 原型的值是一个对象有自己的原型 ...

  2. for in 和 for i 十月 javascript 第一弹 记录

    for in 里面的 i 不仅有 数字还有这些鬼

  3. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  4. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  5. JavaScript之ECMA对象的学习

    从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词.ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语 ...

  6. JQuery制作网页—— 第二章 JavaScript操作BOM对象

    1.window对象: 浏览器对象模型(BOM)是javascript的组成之一, 它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 它的作用是将相关的元素组织包装 ...

  7. Javascript对this对象的理解

    在JavaScript中this表示函数运行的时候自动生成的一个内部对象,只能在函数内部使用,下面是一个简单的例子: function test(){ alert(this == window); } ...

  8. javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())

    javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...

  9. javascript 函数与对象

    javascript中的函数是非常重要的概念,也是比较难于理解的一个知识点! 下面就来聊聊函数: JS基于对象:什么是基于对象呢?简单的说所有代码都是"对象"; 比如函数: fun ...

随机推荐

  1. static-const 类成员变量

    [本文链接] http://www.cnblogs.com/hellogiser/p/static-const.html [分析] const数据成员必须在构造函数初始化列表中初始化; static数 ...

  2. (转)Sql Server 对锁的初步认识

    一:到底都有哪些锁 学习锁之前,必须要知道锁大概有几种???通常情况下作为码农我们只需知道如下几个锁即可... 1.S(Share)锁 为了方便理解,我们可以直接这么认为,当在select的时候在表, ...

  3. codeforces 478A.Initial Bet 解题报告

    题目链接:http://codeforces.com/problemset/problem/478/A 题目意思:简单来说,就是初始化的时候,五个人的值都是 b,现在给出每个人最终的状态:就是经过互相 ...

  4. hdu 1232 畅通工程 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集入门题.最近在学并查集,它无非包括三个操作:make_set(x).union_set(x ...

  5. 毫秒数转换为指定格式日期的js代码

    var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i < 10 ...

  6. MFC 选择一个文件或者文件夹路径

    //选择文件CFileDialog dlg(TRUE, 0, 0, OFN_HIDEREADONLY, "文本文件|*.txt|所有文件|*.*)||",0);if (dlg.Do ...

  7. cocos2dx实现经典飞机大战

    游戏开始层 #ifndef __LayerGameStart_H__ #define __LayerGameStart_H__ #include "cocos2d.h" USING ...

  8. Android实现电子邮箱客户端

    本文主要讲述了安卓平台上利用QQ邮箱SMTP协议,POP3协议发送与接收消息的实现 发送邮件核心代码 import java.security.Security; import java.util.D ...

  9. 现在不能使用foxmail同步qq记事本功能,可能是对字数的大小有限制

    那么在经过了两个星期的时间完成的主要功能就是幻灯片和站点管理,在之后还有更多的任务要做,本来从时间的安排上不太合理,在这个月底要基本完成,主要是其他的组员也有比较重的任务,那么就是需要随时有一个状态, ...

  10. Lucene查询索引(分页)

    分页查询只需传入每页显示记录数和当前页就可以实现分页查询功能 Lucene分页查询是对搜索返回的结果进行分页,而不是对搜索结果的总数量进行分页,因此我们搜索的时候都是返回前n条记录 package c ...