Javascript除了内置对象之外,还可以自定义对象,下面就将介绍JS创建对象的几种方式以及怎么动态添加对象的属性和方法(函数)。关于一些常用内置对象也会在最后介绍。
JS创建对象方式
1.function创建对象的构造函数
- function除了创建普通函数,还能用于创建对象的构造函数。
//创建无参构造函数
function Person(){}
//创建有参构造函数
function Animal(type, weight){
this.type = type;
this.weight = weight;
}
//实例化对象,调用构造函数
var a = new Person();
var b = new Animal("老虎", "100kg");
//使用匿名函数形式创建构造函数
var c = new function(){
}
- function创建构造函数和普通函数没什么两样,但如果不使用new操作符,使用的就是普通函数。而使用new 操作符调用构造函数,就会创建对象。
- 最后使用匿名函数形式创建构造函数,注意:这里的是new function(){} ,而使用new Function(){}是使用Function对象,两者不相同。
2.通过Object对象的构造函数
- 通过所有对象的顶级对象Object来创建对象,和Java一样,对象都是唯一的。
var a = new Object();
var b = new Object();
console.log(a === b); //false
3.使用字面量形式创建对象
//这里创建的是空对象,还未赋予属性和方法
var c = {};
var d = {};
关于字面量形式:个人理解就是一种简写,在JS中一切都是对象,但总不能给变量简单赋个值也用对象形式,太过麻烦。所以为了简单直观,一些地方可以采用字面量形式来书写,如下:
var str = new String("Hello, world");
var strs = "Hello, worlds"; //字面量形式
var num = new Number(110);
var nums = 111; //字面量形式
var arr = new Array(1,2,5,4,5);
var arrs = [1,2,5,4,5]; //字面量形式
上面说完了怎么去创建对象,但对象没有属性和方法(函数),那有什么用呢?接下来会说到给对象动态添加属性和方法的几种方式。
JS对象添加属性和方法
添加方法和调用方法都使用点的形式,而对象存取属性可以用如下两种方式:
- objectName.property = value
- objectName[property] = value
- 两者区别:点后面的属性是作为标识符,而[]中的属性是作为一个字符串。
实例
//创建构造函数
function Person() { }
var p = new Person(); //创建对象
//动态添加属性
p.name = "AAA";
p.age = 15;
//添加函数
p.info = function () {
alert(p.name + "|" + p.age);
}
p.info(); //执行
//创建构造函数,给对象赋予属性和方法
function Person(name, age) {
this.name = name;
this.age = age;
//使用匿名函数形式添加函数
this.info = function(){
alert(name + "|" + age);
}
}
这种方式看起来就类似Java中类定义的方式,但仍有不足之处,后面会说到。
使用Object对象的实例
var a = new Object();
a.name = "青阳";
a.age = 26;
//a对象添加方法
a.info1 = infoFunc;
a.info2 = infoFunc2;
//.形式
function infoFunc(obj) {
console.log(this.name + "|" + this.age);
}
//[]形式
function infoFunc2() {
console.log("[]形式:" + this['name'] + "|" + this['age']);
}
a.info1();
a.info2();
字面量形式对象添加属性和方法与其他两种不一样,以key-value形式添加属性和方法,这种创建对象形式也是最常用的JSON格式。
实例
var obj = {
name : "傲天",
age : "15",
info : function (){
alert(obj.name + "~~" + obj.age);
}
}
obj.info();
上面关于JS创建对象的几种方式,以及它们添加属性和方法形式都已经简单介绍完成。但是这些都是最简单的创建对象方式,在JS中有多种创建对象的用法来处理不同的情况,这里提供网上一张总结创建对象各种模式的表格,至于怎么去实现,可以去百度一下JS创建对象模式,这类文章还是挺多的。
对象创建模式 | 代码示意 | 优点 | 缺点 | 备注 |
---|---|---|---|---|
对象字面量 | var o = {}; | 写法简单 | 如有多个对象类似, 冗余代码多 | 配置文件常用 |
工厂模式 | function factory() { var o = {}; … return o; } var obj = factory(); | 封装了创建对象的细节, 在创建多个相似对象时, 冗余代码少 | 对象的类型识别问题 | |
构造函数 | function Person(name) { this.name = name; } var p1 = new Person(); | 解决了对象类型识别的问题, 更接近传统OO | 相同的方法在每个实例上都有一份, 浪费资源 也可以当成普通函数调用, 此时this指向会乱掉 | |
原型模式 | function Person() {} Person.prototype = { say: function() {} }; | 避免了构造函数模式浪费资源的问题 | 由于共享的性质, 使用引用类型的属性会出问题 | 原型的共享性, 动态性 |
构造函数和原型模式组合 | function Person(name) { this.friends = []; } Person.prototype.say = function() {}; | - | - | |
动态原型 | function Person(name) { this.name = name; if (typeof this.say !== ‘function’) { this.say = function() {}; } } | 最接近传统型OO语言 识别对象的类型 | - | - |
寄生构造 | function Person() { var o = new Object(); … return o; } var p1 = new Person(); | - | 识别对象的类型 | |
稳妥构造函数 | function Person(name) { var o = new Object(); o.say = function() { alert(name); }; return o; } var p1 = Person(‘name’); | 适用于一些安全环境 | 对象类型识别 |
JS用于对象的语句
for...in语句
- 用于遍历数组或者遍历对象的属性。和Java的for-each语句差不多
格式:
for(变量 in 对象){
//执行代码
}
实例
//以之前的对象为例,遍历属性
for(props in obj){
document.write(props);
}
//获取遍历的对象属性值
for(props in obj){
document.write(obj[props] + "\n"); //这里只能用[]形式来获取属性值
}
//遍历数组值
var arr = [4,3,2,35,1,4,36];
//i值是索引
for(i in arr){
document.write(arr[i] + " ");
}
with语句
- 可以方便地引用特定对象,用于设置某些代码在该特定对象中的作用域。
- 简要说明:在with语句块中,没有为属性和方法指定对象时,则默认使用传入的对象。
- 但with语句块运行效率不高,所以能不使用,就不使用。
// //访问对象属性,无需对象名.属性
with(obj){
console.log(name);
console.log(age);
console.log(info);
}
//字符串演示with语句
var str = "what is the use method for with?";
with(str){
console.log(indexOf(1));
console.log(toUpperCase());
console.log(replace("wh", "QQ"))
// 输出结果:
// -1
// WHAT IS THE USE METHOD FOR WITH?
// QQat is the use method for with?
}
JS的常用内置对象总结
- Object对象: JS中所有对象都继承自Object对象,提供了许多处理对象的方法。
- Function对象: 所有函数都是其实例。可以用它的构造函数来动态编译一个函数。
- String对象: 处理所有的字符串操作。
- String对象: 处理所有的字符串操作 。
- Math对象: 处理所有的数学运算。
- Date对象: 处理日期和时间的存储、转化和表达。
- Array对象: 提供一个数组的模型、存储大量有序的数据。
- RegExp对象: 表示正则表达式,它是对字符串执行模式匹配的强大工具。
- Event对象: 提供JavaScript事件的各种处理信息。