javascript面向对象的写法03

时间:2024-06-26 19:05:26

javascript面向对象的写法03

js一些基础知识的说明

prototype

首先每个js函数(类)都有一个prototype的属性,函数是类。注意类有prototype,而普通对象没有。
js中有一些常用的内置类。下面代码打印内置类和自定义类的protytype
console.log(String.prototype);
console.log(Date.prototype);
console.log(Object.prototype); function ClassA(name,job,born) {
}
console.log(ClassA.prototype);

prototype一般作用

prototype作用可以扩展类,为类添加一些属性或者方法的定义。
实际上prototype是类的一个特殊的固有的属性,它指向的是一个简单的普通的对象。因为被指向的是一个普通的对象,所以可以对prototype指向的对象增加属性或修改属性等。prototype指向的对象被更改过后,最后的效果类似把类的定义更改过。
修改prototype指向的对象实例。
Object.prototype.name = "111";    //为Object原型增加一个name属性
function ClassA(name,job,born) {
} ClassA.prototype.name = "123"; //自定义类原型也可以修改
ClassA.prototype.func1 = function(){}; //同样可以修改原型的func1属性为一个函数指针

prototype作用可以扩展类,比如为某个类的原型增加了一些属性,那么该修改过的类所创建的所有对象都有此属性。

function ClassA(name,job,born) {
//此时的ClassA类没有定义任何的属性,用它new出来的对象自然是没有name属性
}
var objB = new ClassA();
console.log(objB.name); //输出undefined Object.prototype.name = "111";
ClassA.prototype.name = "123"; //prototype的修改对之前new出来的对象同样生效 var objA = new Object();
console.log(objA.name); //内置类的prototype修改也是可以的 console.log(objB.name); //修改过prototype后便有这个属性了

  

可以把prototype看做类的另外一半,把prototype和原本的类并在一起就相当于一个完整的类了。

function ClassA() {
this.a = 100;
this.b = 100;
}
ClassA.prototype = {
'name': '123',
'getName': function(){}
}; //类似于
function ClassA() {
this.a = 100;
this.b = 100;
this.name = '123';
this.getName = function(){};
}

js访问一个对象的属性时,先在自己的属性中寻找,如果没有继而会去从类的prototype中找。自己定义的属性是会覆盖住类prototype定义的属性。

function ClassA() {
this.a = 100;
}
ClassA.prototype = {
'a': 200,
}; var obj = new ClassA();
console.log(obj.a); //输出100

prototype还可以修改已有的类

比如修改内置Array类的prototype,添加一个方法。
Array(数组)没有“是否包含”这样的方法,可以自己扩展一个
Array.prototype.containsObject = function(e) {
for (i=0; i<this.length; i++) {
if (this[i] == e) {
return true;
}
}
return false;
};

使用prototype的好处

使用prototype可以扩展类从而使得类创建的对象拥有扩展的属性或方法,类本身作为构造函数也可以为对象设置属性。
function ClassA() {
this.a = 100;
}
ClassA.prototype = {
'b': 200
};

那么两者有何区别呢?使用何种方式好。

首先类作为构造函数的写法是同以下形式作用一样,前面文章提到过。
function ClassA() {
this.a = 100;
} //两者等同
function ClassA() {
}
//
var obj = new ClassA();
obj.a = 100; //也就是如果有其他对象要创建的话就如下面一样
var obj02 = new ClassA();
obj02.a = 100;
var obj03 = new ClassA();
obj03.a = 100;
也就是说类构造函数方式创建的对象,每个对象都有一份所有属性的拷贝。这个无可厚非,对象的普通属性值在不同对象会不同,因该是每个对象一份拷贝的。
但如果属性是一个函数指针呢,也就是说每个对象的方法也都同普通属性一样,各自有一份拷贝。这个就显得不合理,因为函数的具体内容是一样的,只要存一个地方就行了,多少份拷贝没有任何区别。
所以使用prototype可以有更加完善的类的方法的写法。
function ClassA() {
this.func1 = function() {}; //此方法每个类都有一份拷贝。
}
ClassA.prototype.func2 = function(){}; //此方法存在于类的prototype属性中,只有一个地方有。 //调用func2的时候,obj对象自身没有,于是到类的prototype中寻找。
var obj = new ClassA();
obj.func2();

注意这两种写法的区别

function ClassA() {

}
//第一种方式扩展方法
ClassA.prototype.func1 = function() {};
ClassA.prototype.func2 = function() {}; //第二种,注意此种方法会有一些影响
ClassA.prototype = {
"func1": function() {},
"func2": function() {}
};
最关键的地方在于前者ClassA.prototype.func1是对ClassA.prototype的func1属性做操作,字面意思是如果有则修改为,没有则添加一个func1属性。
而后者则是将整个ClassA.prototype指向给替换掉了。替换成了一个{}对象了,{}对象是内置Object类的对象。
看这句更好理解ClassA.prototype = new ClassB()。
后者替换了类原始的prototype属性,后面会提到这种的影响,这个影响应当注意一下,在什么时候会有副作用自己要有所掌控。

constructor

每个js对象都有一个constructor属性,类也有,因为类也是对象,把类当对象使用的时候跟普通对象没区别。
constructor指向的是创建自身对象的构造函数,也就是自身的构造器是哪个。之前提过函数是对象的构造器,同时可以当成类来看待。所以constructor也可以理解成指向创建自己的类,也就是对象自己是由哪个类创建的。
function ClassA() {
} var obj = new ClassA();
console.log(obj.constructor); //这里输出的就是ClassA函数,也就是ClassA类了。 console.log(ClassA.constructor); //类(函数)也是对象,也有constructor。它的是Function

原型对象和原型链

每个对象都有它自己的原型对象。所谓的原型对象就是上面所说的,对象的类(构造函数)的prototype属性所指的那个对象。
请看下面的例子
function ClassA() {
}
var obj = new ClassA(); //obj的原型对象是什么? 是obj构造函数的prototype属性所指向的对象 obj.constructor == obj构造函数
obj.constructor.prototype == obj构造函数的prototype属性所指向的对象 == obj的原型对象
类(函数)也是对象,它也有自己的原型对象。
注意:函数的原型对象不是它的prototype属性所指的对象。而是它构造函数的prototype所指向的对象。请看下面例子
function ClassA() {
}
//ClassA是对象,它的原型对象是什么? ClassA.prototype != ClassA的原型对象
ClassA.constructor.prototype == ClassA的原型对象
函数的构造函数是Function类,因此类的原型对象是Function.prototype所指向的对象。
记住普通对象的原型对象公式:obj.constructor.prototype
原型链就很简单了,就是对象的原型对象也有原型对象,这样一直向上就是原型链的意思了。
当访问对象的某个属性时,如果当前对象没有此属性,那么就从它的原型对象中去寻找,如果再没有,就往原型链的方向查找每一个原型对象,直到Object.prototype指向的对象(顶层的原型对象了)。再没有抛错。
如何从任意一个对象(obj)找到它的祖辈的原型对象?
obj.constructor.prototype.constructor.prototype        //错误
obj.constructor.constructor.prototype //正确

对象靠内部的__proto__属性和原型对象关联。每个对象有个__proto__属性,此属性名字前有下划线就表明他是个内部变量,外部不可访问更加不能修改。

obj.__proto__ == obj.constructor.prototype == obj的原型对象

call和apply方法

最简单,call方法会执行一个函数。但是与简单的函数执行有点不同,下面会提到。

//最简单的使用call,调用一个普通的函数
function func1() {
console.log(func1);
}
func1.call();

call如果带参数则情况不同,call函数的第一个参数有特殊意义,它会将第一个参数传给被调用的函数里面,并且将被调函数里面的this指针切换到这个参数。

function func1() {
console.log(this); //这种情况下,这里的this指向的是下面的a。因为下面使用func1.call调用并传递了第一个参数a。
}
var a = {'b': 100};
func1.call(a); //func1函数会被执行,并且对象a会被传递到func1中,作为func1中this的执行。

如果call没有第一个参数,则默认传递window对象。

看一个稍微复杂点的例子,如果能明白各个方法的调用情况就对call理解了。

function A() {
this.bb = function(){
console.log(this);
};
} function ClassA() {
console.log(this);
this.bb(); //注意ClassA本身没有bb这个方法。
} var a = new A();
a.bb.call(); //调用a.bb方法。因为没有第一个参数,则传递window到a.bb方法中,所以a.bb里面的this指针指向的是window
ClassA.call(a); //调用ClassA函数,ClassA里面的this指针指向的是a对象。所以this有bb方法可以调用。

看下面的例子,因为call可以替换函数内的this对象,则可以达到如下效果。

function A() {
this.attr = 100;
this.func = function(){
};
} function B() {
A.call(this);
} var b = new B();
b.func();
console.log(b.attr);
上面的例子,类B没有定义任何属性和方法,但是它创建的对象b却可以有类A中定义的属性和方法。
A.call(this)调用的地方是类B内部。此时的this指向执行的是b对象,A.call(this)将a对象传递到函数A中,则此时A函数执行过程中的this指针指向了a对象,于是就给a赋值了属性和方法。
通过这样可以模拟出继承的效果,类B继承自类A。
apply
apply函数和call函数功能一样只是参数格式不同。以下的代码效果是一样的
function func(a, b, c, d) {
} func.call(obj, 1, 2, 3, 4);
func.apply(obj, [1, 2, 3, 4]); //第二个参数必须是一个数组。数组里面内容依次是调用func的实参。

除了参数格式外,其他没啥区别。但是因为参数格式不同,所以apply函数可以实现简化代码的作用。例如

function A(a, b, c) {
} function B(a, b, c) {
A.apply(this, arguments); //这里arguments为[1,2,3]。所以就直接传递了,不用自己组装。
} var a = new B(1, 2, 3);
还有一个妙用也可以简化代码。
许多函数被定义成了单个参数形式,Math.max(1,2,3)这样,使用apply则可以Math.max.apply(null, array)。当你获得某个数组的引用的时候,不需要讲数组通过下标一个个将参数再写一次了。

new操作符

new用来创建一个对象,要写面向对象方式的js必须用它。
他最简单的用法就是new 后面跟一个函数名创建一个对象,如果不使用new关键字,那么函数就当做普通的函数对待。
function a(){}

var b = a();    //当做普通函数对待,此时b的值为undefine
var b2 = new a(); //此时b2为一个对象,一个object空对象,没有什么其他自定义的属性。

new内部执行的一些操作

1.创建一个简单的object对象,空的对象就像{}。我们这里把它先叫做aa;
2.设置和原型对象的关联,上面提过原型对象是函数的prototype属性所指向的对象。
aa.__proto__ = Class.prototype;    //前面提到过,对象通过__proto__属性和原型对象关联。

3.执行constructor函数并且设置aa的constructor属性。前面提到过constructor指向的是构造函数(类),constructor函数执行过程中,函数内部会创建一个this指针,this指向到第一步创建的对象中。这样constructor构造函数内部就可以使用this关键字了。

constructor.apply(aa, [args]);    //执行apply方法,传递第一步的对象为第一个参数,则后面的this就是指向的aa.

4.将第一步创建的aa对象,或者说是this指向的对象返回。如果构建函数本身有返回值,则情况会有所不同。

4.1普通情况下返回第一步创建的对象

function ClassA() {
this.a = 100;
}
4.2如果构造函数本身有返回值,并且返回的是一个对象。
function ClassA() {
this.a = 100;
return {
"b": 200
};
} var obj1 = new ClassA();
var obj2 = ClassA(); //此种情况下,ClassA被当作普通函数执行,它里面的this指针指向是全局的对象window

上面此种情况用new操作符和直接执行函数返回的结果是一样的。都是{"b": 200}对象。使用new关键字的情况,前面几个步骤创建的对象会抛弃。

4.3构造函数有返回值,但是返回的不是一个对象,而是一个简单类型或是其他的,则跟没返回值一样,返回的还是this指针。
function ClassA() {
this.a = 100;
return 200; //因为是返回的200是简单类型,所以在使用new ClassA()的情况,此语句可以看做是被忽略了。
}

new关键字做的工作看以看似下面的几条语句

var obj = {};
obj.__proto__ = constructor.prototype;
constructor.apply(obj, [args]);