JavaScript面向对象的概念
一切事物皆对象,面向对象是一种思维方法。面向对象是把要实现的效果分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。
而JavaScript语言是通过一种叫做 原型(prototype)的方式来实现面向对象编程的。基于原型的面向对象方式中,对象(object)则是依靠 构造器(constructor)利用 原型(prototype)构造出来的。
创建对象的方式
1、字面量形式
<script type="text/javascript">
//用大括号括起来就构成了JavaScript对象。这种对象称之为字面量对象。
var person = {
name : "张三",
age : 20,
sex : "男",
eat : function () { //属性的值是函数,这个属性称之为方法。
alert("吃东西");
}
}
</script>
1.1、访问对象的属性
[JavaScript] 提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性(delete)和方法。
alert(person.name); // 访问person对象的 name属性值
person.age = 30; //修改person对象的 age 属性
person.like = "敲代码";//如果不存在这个属性,就给这个对象添加这个属性,并赋值
delete person.age;//使用delete操作关键字,删除person对象的属性age
person.eat(); //既然是调用方法(函数) 则一定还要添加 ()来表示方法的调用
1.2、for...in可以用来遍历对象的所有属性
// 在用for...in遍历的时候, in前面的变量pn指的是属性的名称。
for (pn in person) {
alert(pn + " " + person[pn]);
}
2、构造函数创建对象
<script type="text/javascript">
function Person (name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.eat = function () {
alert(this.name + "在吃东西");
}
}
var p1 = new Person("张三", 20, "男");//必须使用关键字new ,后面跟着构造函数的名,
//根据需要传入相应的参数。
p1.eat(); //张三在在吃东西
var p1 = new Person("李四", 30, "男");
p1.eat(); //李四在在吃东西
alert(p1 instanceof Person); //
</script>
函数的原型对象
在你声明一个函数时,函数会在浏览器默认的生成这个函数的原型对象,而且它会有一个默认的属性prototype这个属性指向这个原型对象,而原型对象有一个默认属性constructor指向这个函数
<body>
<script type="text/javascript">
/*
声明一个函数,则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
创建一个对象,这个对象就是这个函数的原型对象,prototype属性指向这个原型对象。这个原型对象
有一个属性叫constructor 指向了这个函数
注意:原型对象默认只有属性:constructor。其他都是从Object继承而来,暂且不用考虑。
*/
function Person () {
}
</script>
</body>
当把一个函数作为构造函数,使用new创建对象的时候,那么这个对象就会存在一个默认的不可见的属性[[proto]],来指向了构造函数的原型对象。
<body>
<script type="text/javascript">
function Person () {
}
/*
利用构造函数创建一个对象,则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
指向了构造函数的原型对象。
*/
var p1 = new Person();
</script>
</body>
constructor属性存在于原型对象中,它指向了构造函数
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
//使用instanceof 操作符可以判断一个对象的类型。
//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof,因为引用类型用typeof 总是返回objece。
alert(p1 instanceof Person); // true
alert(typeof p1); // object
</script>
可以为用Person.prototype 属性指定新的对象,来作为Person的原型对象。
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
Person.prototype = {
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.name); // 志玲
// p1的类型仍然是Person
alert(p1 instanceof Person); // true
//constructor不再执行Peson函数
alert(Person.prototype.constructor === Person); //false
//如果constructor对你很重要,你应该在Person.prototype中添加一行这样的代码:
/*
Person.prototype = {
constructor : Person //让constructor重新指向Person函数
}
*/
</script>
可以用protocol来判断这个new出来的对象的原型是否是这个原型对象
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
Person.prototype = {
constructor : Person,
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.__proto__ === Person.prototype); //true
</script>
通过原型可以给原生引用类型(Object,Array,String等)添加自定义方法,例如给String添加Chrome不支持但FF支持的startsWith方法:
var str = 'this is script';
//alert(str.startsWith('this'));//Chrome中报错
String.prototype.startsWith = function(strTarget){
return this.indexOf(strTarget) === 0;
}
alert(str.startsWith('this'));//不报错了
注意:不建议给原生对象添加原型属性,因为这样可能会意外重写原生方法,影响其它原生代码(调用了该方法的原生代码)
使用 call 或 apply 这两个方法完成函数借调。这两个方法的功能是一样的,只有少许的区别(暂且不管)。功能都是更改一个构造方法内部的 this 指向到指定的对象上。
<script type="text/javascript">
function Father (name,age) {
this.name = name;
this.age = age;
}
//如果这样直接调用,那么father中的this只的是 window。 因为其实这样调用的: window.father("李四", 20)
// name 和age 属性就添加到了window属性上
Father("李四", 20);
alert("name:" + window.name + "\nage:" + window.age); //可以正确的输出
//使用call方法调用,则可以改变this的指向
function Son (name, age, sex) {
this.sex = sex;
//调用Father方法(看成普通方法),第一个参数传入一个对象this,则this(Son类型的对象)就成为了Father中的this
Father.call(this, name, age);
}
var son = new Son("张三", 30, "男");
alert("name:" + son.name + "\nage:" + son.age + "\nsex:" + son.sex);
alert(son instanceof Father); //false
</script>
实现继承的最佳方式(组合继承)
function object(obj){//返回原型为obj的没有实例属性的对象
function Fun(){}
Fun.prototype = obj;
return new Fun();
}
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype);//建立原型链,继承父类原型属性,用自定义函数object处理是为了避免作为子类原型的父类实例具有实例属性,简单地说,就是为了切掉除多余的实例属性,可以对比组合继承理解
prototype.constructor = subType;//保证构造器正确,原型链会改变子类持有的构造器引用,建立原型链后应该再改回来
subType.prototype = prototype;
}
function SubType(arg1, arg2...){
SuperType.call(this, arg1, arg2...);//继承父类实例属性
this.attr = value;//子类实例属性
}
inheritPrototype(SubType, SuperType);