javascript第一弹——对象
一、 什么是对象
对象是包含一组变量(称为属性)和函数(称为方法)的集合的实例。javascript中所有事物都是对象javascript有很多内建对象javascript允许自定义对象对象只是带有属性和方法的特殊数据类型对象的属性是存储装载信息(属性值)的,可以理解为变量对象的方法是执行其内部所包含的代码块的,可以理解为函数
注:以下所指对象均为自定义对象
二、 怎么创建对象
1、实例创建
//创建一个对象的实例var handsomeMan =newObject();handsomeMan.name='wyang';
字面量写法如下:
var handsomeMan ={};
2、工厂模式
function handsomeMan(){var o =newObject();o.name ='wyang';o.sayName =function(){console.log(this.name);//wyang}return o;}var me = handsomeMan();//经典工厂模式var me =new handsomeMan();//混合工厂模式me.sayName();
为了避免重复创建
sayName方法,把上面的代码做了如下改进:
var sayName =function(){returnthis.name;//wyang}functionHandsomeMan(){var o =newObject();o.name ='wyang';o.sayName = sayName;}var me =HandsomeMan();me.sayName();
3、构造函数
functionHandsomeMan(){this.name ='wyang';this.sayName =function(){console.log(this.name);//wyang}}var me =newHandsomeMan();me.sayName();
为了避免重复创建
sayName方法,把上面的代码做了如下改进:
var sayName =function(){returnthis.name;//wyang}functionHandsomeMan(){this.name ='wyang';this.sayName = sayName;}var me =newHandsomeMan();me.sayName();
4、原型模式
var sayName =function(){returnthis.name;//wyang}functionHandsomeMan(){};HandsomeMan.prototype.name ='wyang';HandsomeMan.prototype.sayName = sayName;var me =newHandsomeMan();me.sayName();
5、混合模式(构造函数模式+原型模式)
functionHandsomeMan(){this.name ='wyang';}HandsomeMan.prototype.sayName =function(){console.log(this.name);//wyang}var me =newHandsomeMan();me.sayName();
三、 对象的属性是什么?
属性是存储装载其所对应对象的一些信息的容器;
对象中的属性是无序的,每一个属性都有一个字符串key和对应的 value;
不管设置的属性是否是字符串,javascript都会把它转换为字符串;
1、属性是可以动态添加或删除的。如下:
var obj ={};obj.x =1;obj.y =2;
2、对象中的每一个属性都有很多的属性标签,比如:
writable:能否修改属性的值;默认值为true;enumerable:能否通过for-in循环返回属性(是否可枚举);默认值为true;configurable:能否删除、重新定义、修改属性特性、把属性修改为访问器属性/数据属性(是否能够配置);默认值为true;value:属性的数据值;可读写;默认值为undefined;get/set:
扩展:原型链
functionHandsomeMan(){}HandsomeMan.prototype.name ='wyang';//实例化对象var obj =newHandsomeMan();obj.age =26;obj.hobby ='programme';obj.age //26obj.hobby //programmeobj.name //wyang
1)、上面的例子我们先定义了一个HandsomeMan的函数对象;HandsomeMan自带了一个prototype属性,它的属性是对象属性;
2)、HandsomeMan.prototype是一个对象;我们把这个对象添加一个属性name并赋值为wyang;
3)、用构造器的方式构造了一个新的对象obj;然后给这个对象添加了两个属性并赋值;然后通过访问这两个属性得到属性值;
4)、obj这个对象的原型会指向构造器的属性也就是HandsomeMan.prototype;
4)、[重点]当用obj.age访问age属性时,发现obj上有age这个属性,所以就会返回26;hobby同理;但是当用obj.name来访问name时;发现obj上面没有name,这时它不会停止查找,而是继续向上查找他的原型也就是HandsomeMan.prototype;然后发现有name这个属性;所以返回wyang;
如果给
obj.name赋值,那么HandsomeMan.prototype.name的值会被修改么?
obj.name ='wangyang';obj.name //wangyang;HandsomeMan.prototype.name //wyang
从上面的例子可以看出,如果给obj.name赋值,HandsomeMan.prototype.name的值是不会被修改的。因为obj对象里面有name这个属性,所以不会向上查找;
那么怎么再次通过
obj对象拿到原型上的name呢?
delete obj.name;obj.name //wyang
如上代码,通过删除obj.name后,就可以获得原型上的name;实际上这也就是原型链的继承;
四、 怎么给对象的属性赋值?
- 键值对结构用“:”赋值;
- 动态结构用“=”赋值;
五、 如何操作对像的属性?
1、读写对象的属性
var obj ={name :'wyang',age :26}obj.name;//wyangobj['age'];//26obj.hobby ='programme';obj['eat']='food';//当需要拼接对象的属性名或者用``for in``遍历所有属性的时候用‘[]’,其余的场景推荐使用‘.’;
2、属性异常
var obj ={age:26}obj.name;//undefinedobj.name.hobby //TypeError: Cannot read property 'hobby' of undefinedobj.name.hobby ='programme';//TypeError: Cannot read property 'hobby' of undefined
如果想对obj.name这个属性处理一些事情的话;需要先判断下obj.name是否存在:
var nh;//var nh = obj && obj.name && obj.name.hobby;if(obj.name){nh = obj.name.hobby}
3、删除属性
var obj ={name :'wyang',age :26}delete obj.name //truedelete obj['age']//trueobj.name //undefinedobj.age //undefineddelete obj.name //如果重复删除已经不存在的属性,不会做任何事情,但是属性已经不存在了,javascript仍然会返回true;
1)、delete 并不代表操作成功,只是表示这个对象上并不存在这个属性;
2)、Object.prototype不能够被删除,因为它的configurable为false;所以删除会返回false;
延伸:全局变量、局部变量、函数声明都不能通过
delete被删除;
var a =1;delete a;//falsefunction a(){var b =1;returndelete b;}a()//falsefunction a(){}delete a //false//隐式创建的变量可以被删除(不推荐使用)a =1;window.a;//1delete.a //true
4、检测属性
//检测对象上是否含有某个属性var obj =newObject;obj.name ='wyang';obj.age =26;'name'in obj;//true'hobby'in obj;//false'toString'in obj;//trueobj.hasOwnProperty('name');//true ‘obj’这个对象上包含‘name’这个属性;obj.hasOwnProperty('toString');//false
从上面的例子可以看出来:in操作符是会通过原型链向上查找的,它是作用于整个原型链的,所以不管是这个对象上的属性还是原型链上的属性都会返回‘true’;hasOwnProperty操作符是针对于当前对象的,不会去通过原型链向上查找;上面例子的‘obj’这个对象上没有包含‘ toString’这个属性;所以返回false;它的原型链上才有‘ toString’这个属性;
//检测对象上的某个属性是否可枚举obj.propertyIsEnumerable('name');//trueobj.propertyIsEnumerable('toString');//false ‘Object.pertotype’上的大部分标签的‘enumerable’都是false;
5、枚举属性
var obj ={name :'wyang',age :26}var $property;for($property in obj){console.log($property);//name、age}
上面例子通过for in来枚举当前对象上可枚举的属性;
var o =Object.create(obj);//通过‘ Object.create’来船舰一个新对象,这个对象的原型指向‘obj’;o.hobby ='programme';//默认可枚举var $property;for($property in obj){console.log($property);//name、age、hobby}
如果只想处理‘o’这个对象上的属性,不想处理这个对象原型链上的属性呢?
var o =Object.create(obj);o.hobby ='programme';var $property;for($property in obj){if(obj.hasOwnProperty($property)){ //只枚举当前对象上的属性,过滤掉这个对象原型链上的属性console.log($property);//hobby}}
6、属性的get/set方法
get:在读取属性时调用的函数,默认值为 undefined
set:在写入属性时调用的函数,默认值为 undefined
var obj ={name :'wyang',get age(){returnnewDate().getFullYear()-1989;},set age(val){console.log('您不能修改年龄为'+val+'岁!!!');}}console.log(obj.age);//26obj.age =100;//您不能修改年龄为100岁!!!console.log(obj.age);//26
六、什么是方法
方法是能够在对象上执行的动作。说白了就是包含在对象中的函数
七、怎么定义对象方法
暂且不表
八、如何调用对象的方法?
objectName.methodName()
九、对象标签
对象级别的标签主要有三种:[[proto]]、[[class]]、[[extensible]]
1、原型链是通过proto这个标签来实现的
2、class表示对象是哪一个类型,没有直接的方式去查看或修改它;需要通过间接的手段;
3、extensible表示对象是否可扩展
十、对象序列化
/***后端需要一个字符串格式的数据*/var obj ={name:"wyang",age:26, hobby:["programme","eat"],gf:null,single:true};JSON.stringify(obj);//"{"name":"wyang","age":26, "hobby":["programme","eat"],"gf":null,"single":true}"/***坑:*1. 如果序列化的值是'undefined',那么就不会出现在序列化的结果当中*2. 如果序列化的值是'NaN'、'Infinity',那么会转换为'null'*3. 如果序列化的值是时间的话,会转换成UTC的时间格式*/var obj ={name:'wyang',age:26, hobby:['programme','eat'],gf:null,single:true,love:undefined,a:NaN,b:Infinity,c:newDate()};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 (中国标准时间)"}"/***后端返回一个json格式的数据,变为js对象*/var obj = JOSN.parse('{"name":"wyang"}');obj.name //wyang;
javascript第一弹——对象的更多相关文章
- [WEB面试题] web前端面试题JavaScript第一弹,个人整理部分面试题汇总
以下内容仅供参考,成年人不讲对错只讲利弊 1.什么是JavaScript原型链?如何理解 JavaScript中的每个对象都有一个prototype属性,我们称之为原型 原型的值是一个对象有自己的原型 ...
- for in 和 for i 十月 javascript 第一弹 记录
for in 里面的 i 不仅有 数字还有这些鬼
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- JavaScript之ECMA对象的学习
从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词.ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语 ...
- JQuery制作网页—— 第二章 JavaScript操作BOM对象
1.window对象: 浏览器对象模型(BOM)是javascript的组成之一, 它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 它的作用是将相关的元素组织包装 ...
- Javascript对this对象的理解
在JavaScript中this表示函数运行的时候自动生成的一个内部对象,只能在函数内部使用,下面是一个简单的例子: function test(){ alert(this == window); } ...
- javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())
javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...
- javascript 函数与对象
javascript中的函数是非常重要的概念,也是比较难于理解的一个知识点! 下面就来聊聊函数: JS基于对象:什么是基于对象呢?简单的说所有代码都是"对象"; 比如函数: fun ...
随机推荐
- 【leetcode】3Sum
3Sum Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find a ...
- 【leetcode】String to Integer (atoi)
String to Integer (atoi) Implement atoi to convert a string to an integer. Hint: Carefully consider ...
- Netbeans快捷键
一.常用快捷键:1.在文件中查找指定内容 Ctrl+F2.在文件中替换指定内容 Ctrl+H3.在整个项目中查找指定内容 Ctrl+Shift+f4.自动复制整行代码 Ctrl+Shift+上/下方向 ...
- 解决reload AVD list: cvc-enumeration-valid: Value '360dpi' is not facet-valid with respect to enumeration '[ldpi, mdpi, tvdpi, hdpi, 280dpi, xhdpi, 400dpi, xxhdpi, 560dpi, xxxhdpi]'. It must be a v
解法: 将 D:\work\android-sdk-windows\tools\lib\devices.xml 替换到 D:\work\android-sdk-windows\system-image ...
- cjb
输入216.194.70.6 ,进入到是cjb.net的主页,并不是shell.cjb.net ,进入主页后点击shell,就进不去了 分析:shell.cjb.net被DNS污染了 解法:hosts ...
- Linux多台服务器之间的文件共享
由于项目有个图片上传和导入导出的模块,所以当项目通过集群方式部署的时候就要考虑文件共享问题. 文件共享要么就是通过统一的文件系统来管理,要么就是在系统之间做文件共享,前者扩展性比较好,可以随时随地加服 ...
- python联接主流SQL的类库个人收藏
我现在主要是用以下这个类库来分别连接oracle,postgresql,mysql,mssql的. PyMySQL,pymssql,cx_Oracle,psycopg2 收藏 一下.. https:/ ...
- 面向服务的体系结构(SOA)——(5)关于MEP(Message Exchange Patterns)
SOA中的MEP和JavaEE中的JMS类似,当然了就应该是类似的,因为都是关于消息方面的.一个是对系统架构当中消息的解决思路,一个是针对Java平台中的消息的具体解决办法(严格说不是具体的,只是提供 ...
- Emacs简易教程
Emacs简易教程阅读: 命令: $emacs 进入之后,输入: C-h t 这里,C-h表示按住[Ctrl]键的同时按h ####### 20090620 *退出: 输入“C-x C-c” *撤销: ...
- C# WPF 之 遍历子控件
/// <summary> /// 检查非空字段 /// </summary> /// <param name="IsOk"></para ...