javascript面向对象的写法03
js一些基础知识的说明
prototype
console.log(String.prototype);
console.log(Date.prototype);
console.log(Object.prototype); function ClassA(name,job,born) {
}
console.log(ClassA.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.containsObject = function(e) {
for (i=0; i<this.length; i++) {
if (this[i] == e) {
return true;
}
}
return false;
};
使用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;
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() {}
};
constructor
function ClassA() {
} var obj = new ClassA();
console.log(obj.constructor); //这里输出的就是ClassA函数,也就是ClassA类了。 console.log(ClassA.constructor); //类(函数)也是对象,也有constructor。它的是Function
原型对象和原型链
function ClassA() {
}
var obj = new ClassA(); //obj的原型对象是什么? 是obj构造函数的prototype属性所指向的对象 obj.constructor == obj构造函数
obj.constructor.prototype == obj构造函数的prototype属性所指向的对象 == obj的原型对象
function ClassA() {
}
//ClassA是对象,它的原型对象是什么? ClassA.prototype != ClassA的原型对象
ClassA.constructor.prototype == ClassA的原型对象
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);
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);
new操作符
function a(){} var b = a(); //当做普通函数对待,此时b的值为undefine
var b2 = new a(); //此时b2为一个对象,一个object空对象,没有什么其他自定义的属性。
new内部执行的一些操作
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;
}
function ClassA() {
this.a = 100;
return {
"b": 200
};
} var obj1 = new ClassA();
var obj2 = ClassA(); //此种情况下,ClassA被当作普通函数执行,它里面的this指针指向是全局的对象window
上面此种情况用new操作符和直接执行函数返回的结果是一样的。都是{"b": 200}对象。使用new关键字的情况,前面几个步骤创建的对象会抛弃。
function ClassA() {
this.a = 100;
return 200; //因为是返回的200是简单类型,所以在使用new ClassA()的情况,此语句可以看做是被忽略了。
}
new关键字做的工作看以看似下面的几条语句
var obj = {};
obj.__proto__ = constructor.prototype;
constructor.apply(obj, [args]);