一.Object 对象
1. 什么是对象
对象是由一对或者多对属性(包含属性名和属性值)组成的集合,属性名也叫做键名,属性值也叫做键值,所以对象的属性也可以称为键值对;
示例
// 描述心中的对象
var wuwei = {
name: "wuwei",
age: 18,
sex: "male",
eat: function (){
console.log("I eat damifan")
}
}
1. 对象的创建
创建一个对象,有两种方法,第一种比较简单,叫做字面量;第二种是用new Object()。
1.1 字面量的创建方式
plainObject 对象字面量/ 对象直接量
var obj = {
name : "wuwei",
age : 18,
sex : "男"
};
console.log(obj);
console.log(obj.name);
console.log(typeof obj);
{}就是对象的界定符,就是对象的字面量。对象有属性,所谓的属性就是这个对象的特点、特性,
哲学上讲,什么是对象?对象就是属性的无序集合。
我们可以用.
点操作符或者中括号法来获得一个对象的属性。那么你会发现,
公式:
{
key : value,
key : value,
key : value,
key : value,
}
1.2 属性加引号的情况
在有些特殊的情况下, 属性是必须加引号的
- 属性为特殊字符
- 属性为数字
- 属性中有空格
- 关键字、保留字(尽量不要使用)
特殊形式的属性,必须要加上引号,检索属性的时候,必须用方括号:
var obj = {
"24&*$&#@@)@!" : "哈哈",
"all name" : "考拉",
"++++%%%%" : "嘻嘻",
"var" : "么么哒",
"function" : "嘻嘻"
}
console.log(obj["24&*$&#@@)@!"]);
console.log(obj["all name"]);
console.log(obj["++++%%%%"]);
console.log(obj["var"]);
console.log(obj["function"]);
你会发现,JS中对象的属性名,没有特殊的规定。这是因为属性名不是标识符,没有那些规定。
- 如果属性名符合标识符规范,可以加引号,也可以不加引号,
- 如果不符合标识符规范,则属性必须加引号
对象的属性的访问(使用),点语法是有局限的,他只能访问符合标识符规范的属性
var obj = {
name : "考拉",
age : 18,
sex : "男",
"study score" : 100
}
//console.log(obj."study score");//错误的
console.log(obj["study score"]); //正确的
console.log(obj["a" + "ge"]); //正确的
var a = "sex";
console.log(obj[a]); //正确的
1.3 如果属性不是一个字符串会被转成字符串
var obj = {};
var a = {key:'a'};
var b = {key:'b'};
obj[a] = 123;
obj[b] = 345;
console.log(obj[a]);
1.4 new 操作符创建对象
new Object() 构造函数创建方法
构造函数创建方法由两种,
系统自带的构造函数 new Object()
系统自带的构造函数,就像工厂生产产品,长的都一样,但彼此独立,加上new操作符,就能给你返回一个对象,用变量接收保存对象
自定义的的构造函数
构造函数遵循大驼峰式命名规则 Person TheFirstName
var obj = new Object(); //这是一个空对象,里面没有任何属性
obj.name = "wuwei";
obj.age = 18;
obj.sex = "男";
console.log(obj);
console.log(obj.age);
console.log(typeof obj);
new是一个运算符,和+-*/一样是一个运算符。表示新创建一个对象。构造函数的定义和使用后面章节学习
1.5 对象操作属性
1.5.1 使用.
操作符给对象添加属性
字面量方式添加属性:
var obj = {
name : "考拉",
age : 29,
sex : "母"
};
构造函数方式添加属性:
var obj = new Object();
obj.name = "考拉";
obj.age = 30;
obj.sex = "男";
上面两种方式创建出来的对象,是相同的。字面量的方式直观、简单、
但是,不建议混合使用:
var obj = {}; //的确能创建一个空对象
obj.name = "考拉"; //追加属性
obj.age = 18; //追加属性
obj.sex = "男"; //追加属性
2. 对象的属性值
对象属性值,可以是任何东西。比如数字、字符串、布尔值、正则表达式、对象、数组、函数……
var kaola = {
name : "考拉",
age : 22,
peiou : {
name : "母考拉",
age : 37
}
}
var obj = {
a : 1,
b : "哈哈",
c : true,
e : function(){
console.log(1+2);
},
f : {
p : 1
}
}
特别的,当对象的属性的值是一个函数的时候,我们称这个函数是对象的方法。
3. 对象的方法
当一个对象的属性的值,是一个函数,那么这个函数我们就称为对象的“方法”(method)。
方法就是一个对象能够做的事情,一般来说,就是一个动词。比如小明的自我介绍
var xiaoming = {
name : "小明",
age : 18,
sex : "男",
sayHello : function(){
alert("你好,我是" + xiaoming.name);
alert("今年" + xiaoming.age + "岁了");
alert("我是可爱的小" + xiaoming.sex + "生");
}
}
xiaoming.sayHello();
比如上面的案例,sayHello就是一个属性,只不过它的值是一个函数,所以我们就可以说xiaoming这个对象,有sayHello方法。
j简单点学习对象“方法”,无非就是学习了一种函数的调用方式。这个函数里面的this指的是这个对象。
至于函数中的this,会有变化, 关于this到底是谁的问题,我们后面在学
var xiaoming = {
name : "小明",
age : 18,
sex : "男",
sayHello : function(){
alert("你好,我是" + this.name);
alert("今年" + this.age + "岁了");
alert("我是可爱的小" + this.sex + "生");
},
zhangda : function(){
this.age++;
}
}
4. 对象的特点
- 对象的属性名是字符串类型,如果不是,会发生隐式类型转换
- 对象的属性名不能重复,如果重复,后加的属性值覆盖之前同名的属性值
5. 对象的常用操作
增加 obj.height = ‘1.8m’
删除 delete obj.name
改变 obj.name =‘xuanwu’
查看 obj.age
5.1 对象操作属性名的两种方式
点操作
obj.name
[]操作
obj[“name”] // obj.name
obj[name]
6. 对象的遍历
for-in循环 作用:遍历对象
var obj = {
name: "wuwei",
age:18,
sex: "男"
}
for(var key in obj){
console.log(key);
consol.log(obj.key);
}
对象是和函数一样是引用数据类型
二.认识构造函数
构造函数内部原理,构造函数必须加new操作符,本来他只是一个普通的函数,加new就能产生构造函数的功能,构造函数的功能就是创建对象
一旦使用new操作符,函数内部将会隐式执行三步
- 隐式的创建一个对象,var this = {}
- 执行代码
- 返回this对象
function Person(name,age){
// var this = {}
this.name = name;
this.age = age;
this.sex = "男";
this.say = function(){
console.log(this.name);
}
// return this
}
var student = new Person("wuwei",18)
题目:
function Person(name,age){
var a = 0;
this.name = name;
this.age = age;
function student(){
a ++;
console.log(a);
}
this.say = student;
}
var oPerson = new Person();
oPerson.say(); // 1
oPerson.say(); // 2
var oPerson2 = new Person();
oPerson2.say(); // 1
三. 包装类
1. 数字 字符串 布尔值的包装类
基础数据类型是不能有属性和方法的大家知道吧,属性和方法只有对象才有,是对象特有的,像Function,Object,Array 都是对象,原始值不能算到对象里面的,他只是一个值,作为一个独立的个体存在
数字都是原始值对吗,不对,数字分两种,只用原始值数字才是原始值
var num = 123; // 这是原始值数字
var num2 = new Number(123); // 这也是数字,这很明显是构造函数,然后new出来的对象,
console.log(num2); // Number {123} 返回对象形式的123
一旦变成对象,这家伙就飞了,可以有属性可以有方法
num2.name = "wuwei";
同时它还是具有原来值的特性
var aa = num2 * 2;
console.log(aa); // 246
字符串,布尔值完全一样
var str = new String("wuwei");
var bol = new Boolean(true);
2. undefined null 没有包装类
所以不能像对象一样是用属性和方法
undefined.name = "aa";
// 报错,报引用类型错误
现在明白了吧字符串,布尔值,数字有两种,原始值是没有属性和方法的,另外一种对象,是有属性和方法的
3. 作用
var str = "wuwei";
console.log(str.length); //5
不是说原始值没有属性和方法吗,你这里的length是哪里来的 很明显是在操作属性啊
我们在看下能不能给他设置属性
var str = "wuwei";
str.name = 123;
// 没报错,说明赋值进去了吧,我们获取一下
console.log(str.name); // undefined
这都是咋回事呢
记住原始值一定不能有属性和方法的,那么上面的情况是怎么回事呢,应为它经历了一个过程叫包装类
var str = "wuwei";
str.name = 123;
// 隐式的 new String(str);
// 会新建一个字符串对象来弥补你的操作不足,
// new String(str).name = 123; 操作完成之后 delete 删除这个对象
// 这个new String没有保存在任何地方 用完直接删了
console.log(str.name);
// 再次new Sting(str);这个和上面不是一个String,这个对象上没有name
基于这样一个理论,
var str = "wuwei";
str.length = 2;
console.log(str);
这个就是包装类,如果你发现原始值操作属性都是被隐式的包装成为了对象
测试:
var str = "wuwei";
str += 1;
var test = typeof str;
if(test.length == 6){
test.sign = "typeof返回的结果可能是String"
}
console.log(test.sign)