JavaScript 对象及初识面向对象

JavaScript 对象及初识面向对象
对象
创建对象
构造函数
原型对象
继承
原型链
对象继承
对象
创建对象
在JavaScript中,有Date、Array、String等这样的内置对象,这些内置对象的功能简单而强大,非常实用,但是在处理一些复杂的逻辑时,内置对象就无能为力了,这时就需要开发人员自定义对象了,所以在JavaScript中,对象分为两种:

自定义对象
语法:var 对象名称 = new Object();
示例 如下:

var dog = new Object();
dog.name = "铁头娃";
dog.strain = "二哈";
dog.age = 12;
dog.gender = "公";
dog.showName = function(){
alert(this.name);
}
dog.showName();
//或
var dog = {
name : "铁头娃",gender:"公",age:12,
strain:"二哈",
showName:function(){
alert(this.name);
}
}
dog.showName();
内置对象
JavaScript的内置对象是一种特殊的数据,常见的内置对象如下:
1)String(字符串) 对象
2)Date(日期) 对象
3)Array(数组)对象
4)Boolean(逻辑)对象
5)Math(算数)对象
6)RegExp 对象

构造函数
构造函数可用来创建特定类型的函数,像Object 和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数。由此可知,所谓的“构造函数”就是一个普通函数,但是内部使用了 this 变量,对构造函数使用 new 操作符,就能生成实例,并且this 变量会绑定在实例对象上,从而定义自定义对象类型的属性和方法。

注意:构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头,这个做法借鉴其他面向对象语言,主要是为了区别于ECMAScript中的其他函数,因为构造函数本身也是函数,只不过可以用来创建对象。

使用构造函数创建新示例,必须使用 new 操作符,以这种方式调用构造函数实际上会经历以下四个步骤:

创建一个新对象。
将构造函数的作用域赋给新对象(this就指向了 这个新对象)
执行构造函数中的代码
返回新对象
对象的 constructor 属性可以用来标识对象类型, instanceof 操作符可以检测对象类型,返回值为 布尔类型;
原型对象
在JavaScript中创建的每个函数都有一个 prototype 属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。按照字面意思理解,prototype 就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象的好处就是可以让所有对象实例共享它所有的属性和方法,也就是说不必在构造函数中定义对象实例的信息,可以将这些信息直接添加到原型对象中。
示例:

function Flower(){

}
Flower.prototype.name = "曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area = "印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function(){
alert(this.name);
}
var flower1 = new Flower();
flower1.showName();
var flower2 = new Flower();
flower2.showName();
alert(flower1.showName == flower2.showName);
以上代码中,新对象都拥有 Flower 的属性和方法,但与构造函数不同的是,新对象的这些属性和方法是由所有实例共享,也就是说flower1和flower2访问的都是同一组属性和同一个showName()函数,所以 flower1.showName(); 和 flower1.showName();都返回值为 “曼陀罗花”,最后一句代码 alert(flower1.showName == flower2.showName); 返回值为true。
在默认情况下,所有的原型对象都会自动获得一个 constructor (构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。
虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值,如果在实例中添加一个属性,而该属性与实例原型中的一个属性同名,那就在实例中创建该属性,该属性将会屏蔽原型中的那个属性,修改上方代码如下所示:

function Flower(){

}
Flower.prototype.name = "曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area = "印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function(){
alert(this.name);
}
var flower1 = new Flower();
flower1.name="长春花";
var flower2 = new Flower();
flower1.showName();
flower2.showName();
alert(flower1.showName == flower2.showName);
以上代码中 flower1.showName(); 返回值为“长春花”,而 flower2.showName(); 返回值为“曼陀罗花”。
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性,也就是说,添加这个属性只会阻止我们访问原型中的这个值,但不会修改原型的值,即使想这个属性设置为 null,也只对在实例中设置这个属性,而不会恢复其指向原型的链接。

继承
原型链
在JavaScript中,每个构造函数都拥有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针( _proto_ )。
示例如下:

function Humans(){
this.foot=2;
}
Humans.prototype.getFoot= function () {
return this.foot;
}
function Man(){
this.head=1;
}
Man.prototype = new Humans(); //继承了Humans
Man.prototype.getHead= function () {
return this.head;
}
var man1 = new Man();
alert(man1.getFoot); //返回结果:2
alert(man1 instanceof Object); //返回结果:true
alert(man1 instanceof Humans); //返回结果:true
alert(man1 instanceof Man); //返回结果:true
以上代码定义了两个类型,分别为 Humans 和 Man,每个类型分别有一个属性和方法,它们的主要区别是 Man继承了Humans,而继承是通过创建 Humans 的实例,并将这个实例赋值给 Man.prototype 实现的。实际上就是重写原型对象,赋值于一个新类型的实例,也就是说,原来存在于 Humans 的实例中的属性和方法,现在也存在于 Man.prototype 中了,在确立了继承关系之后,又给 Man.prototype 添加了一个方法,这样就在继承了Humans 的属性和方法的基础上又添加了一个新方法。

对象继承
借用构造函数
借用构造函数就是在子类型构造函数的内部调用父类型构造函数,即在子类型构造函数的内部通过 apply() 或 call() 方法调用父类型的构造函数,也可以在将来新创建的对象上执行构造函数,语法如下:

//应用某一对象的一个方法,用另一个对象替换当前对象
apply([thisObj[,argArray]]);
//调用一个对象的一个方法,以另一个对象替换当前对象
call([thisObj[,arg1[,arg2[[,argN]]]]])
组合继承
组合继承(combination inheritance)有时也叫作伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。
示例:

function Humans(name){
this.name=name;
this.clothing=[1,2,3];
}
Humans.prototype.sayName=function(){
alert(this.name);
}
function Man(name,age){
Humans.call(this,name); //继承属性
this.age = age;
}
Man.prototype = new Humans(); //继承方法
Man.prototype.sayAge=function(){
alert(this.age);
}
var man1 = new Man("小花", 12);
man1.clothing.push(4);
alert(man1.clothing); //输出 1 2 3 4
man1.sayName(); //输出 小花
man1.sayAge(); //输出 12

var man2 = new Man("小红", 13);
alert(man2.clothing); //输出 1 2 3
man2.sayName(); //输出 小红
man2.sayAge(); //输出 13
组合继承避免了原型链和借用构造函数的缺陷,融合了他们的优点,成为JavaScript中最常用的继承模式。

原文地址:https://www.cnblogs.com/rzbwyj/p/10998607.html