js 操作java对象_JavaScript 对象基础

JavaScript 对象基础

JavaScript 对象的基本形式、对象的创建方式、构造函数、包装类等

对象的格式

基本格式

对象使用一个{}进行包裹，内部属性以键值对形式声明

示例 var teacher = {

name: "pgjett",

age: "22",

teach: function () {

console.log("I teach javascript");

},

drink: function () {

console.log("I drink beer");

}

}

对象的的属性

属性的增删改查 var teacher = {

name: "pgjett",

var teacher = {

name: "pgjett",

age: "22",

teach: function() {

console.log("I teach javascript");

},

drink: function() {

console.log("I drink beer");

}

}

// 增加

teacher.smook = function(){

console.log("I smook");

}

// 删除

delete teacher.name;

// 改变

teacher.teach =function() {

console.log("I teach java");

}

// 查找/访问

console.log(teacher.name);

console.log(teacher["name"]);

// 最早的 JS 引擎使用 obj["name"] 访问

// 使用 obj.name 会自动转换成 obj["name"]

对象方法访问属性

一般将普通函数称之为函数，对象内的函数称之为方法 var teacher = {

name: "pgjett",

age: "22",

weight: "65",

teach: function() {

console.log("I teach javascript");

},

eat: function() {

this.weight++;

console.log("I eat, my weight is " + this.weight);

}

}

teacher.eat();

带参数的对象方法 var attendance = {

students: [],

join: function(name) {

this.students.push(name);

console.log(name + " 已到课");

},

leave: function(name) {

var idx = this.students.indexOf(name);

if (idx != -1) {

this.students.splice(idx, 1);

console.log(name + "早退");

}

}

}

attendance.join("张三");

attendance.join("李四");

attendance.join("王五");

attendance.join("赵六");

attendance.join("孙七");

attendance.leave("李四");

// 张三 已到课

// 李四 已到课

// 王五 已到课

// 赵六 已到课

// 孙七 已到课

// 李四早退

对象的创建方式

对象字面量

也叫对象直接量 var obj = {

name: "Jett",

age: 22""

}

内置构造函数

使用 new Object()，与对象直接量没什么区别 var obj = new Object();

obj.name = "Jett";

obj.age = "22";

自定义构造函数

自定义构造函数使用大驼峰命名，通过 new 创建对象实例，且 new 出的示例是不同对象，有各自的属性

自定义构造函数是 javascript 模块化、插件化的重要内容 function Teacher(){

this.name = "Jett";

this.age = 22;

this.teach =function(){

console.log("I teach javascipt");

}

}

var teacher1 = new Teacher();

var teacher2 = new Teacher();

teacher2.name = "John";

console.log(teacher1);

console.log(teacher2);

// Teacher{name: "Jett", age: 22, teach: teach(){}}

// Teacher{name: "John", age: 22, teach: teach(){}}

自定义构造函数传入参数 function Teacher(opt) {

this.name = opt.name

this.age = opt.age;

this.teach = function() {

console.log("I teach " + opt.course);

}

}

var teacher1 = new Teacher({

name: "Jett",

age: 22,

course: "javascript"

});

var teacher2 = new Teacher({

name: "John",

age: 25,

course: "java"

});

构造函数原理

this 的指向

不使用 new，直接执行，根据预编译原理，this 默认指向 window

在全局作用域中，this 代表 window function Car() {

this.color = "red";

this.brand = "BMW";

}

Car();

console.log(window.color);

console.log(this.color);

// red

// red

使用 new 实例化对象，this 指向该实例 function Car() {

this.color = "red";

this.brand = "BMW";

}

var car = new Car();

console.log(car.color);

this 转变的过程

当 new 一个构造函数时，就相当于该构造函数执行，它的 AO 中会有一个 this 指向一个默认的属性

当执行 this.color = "red";

this.brand = "BMW";

相当于在 this 上添加属性

使用 new 关键字后会将 this 抛出，赋值给一个引用

这就是一个实例对象，这个实例可以访问 color、brand 属性

构造函数中的 return

new 一个构造函数默认会隐式 return this

如果显式 return 一个原始值，实例对象不受影响

如果显式 retrn 一个引用值，new 出的实例将指向该引用值 function Car() {

this.color = "red";

this.brand = "BMW";

return 1;

}

var car = new Car();

console.log(car.color);

// red

包装类

Number

通过构造函数创建数字对象，可以设置属性

在运算中可以自动解包装

与此类似的还有 String，Boolean var a = new Number(1);

a.name = "a";

console.log(a);

console.log(a + 1);

// 打印

// Number{1, name: "a"}

// 2

原始值自定义方法和属性，每次访问都会被包装成相应类型的对象，仅仅是临时容器，执行后则销毁，再次访问又重新包装，只能访问到 undefined var a = 1;

a.name = "a";

// js 引擎将 a 包装成数字对象，

// 即 new Number(a).len = 3

// 临时容器没有变量保存，执行 delete，删除该 len 属性

console.log(a.name);

// 即 console.log(new Number(a).len)

// 打印 undefined

String

字符串原始值并没有 length 属性，实际上是包装成字符串对象后访问 length 属性 // js 引擎将 "123" 包装成字符串对象

var str = "123";

str.length = 1;

// 即 new String(str).length = 1;

console.log(str.length);

// 即 console.log(new String(str).length)

// 打印 3

对象链式调用

通过 return this 将对象抛出，以调用其他函数

```javascript

var sched = {

marning:function(){

console.log("marning studying");

return this;

},

noon:function(){

console.log("noon sleeping");

return this;

},

afternoon:function(){

console.log("afernoon shopping");

return this;

}

}

sched.marning().noon().afternoon();

```

对象枚举

for in 遍历对象属性 var obj = {

name: "Jett",

age: 22,

address: "安徽"

}

for( var key in obj) {

console.log(key, obj[key]);

}

// name Jett

// age 22

// address 安徽

用 in 判断对象是否有某个属性 var obj = {

name: "Jett",

age: 22,

address: "安徽"

}

console.log("name" in obj);

// true