javascript面向对象程序设计实践常用知识点总结
本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下:
实践一:原型中的引用类型的属性是共享的
varPerson=function(){};
Person.prototype={
info:{
"name":"Tom"
}
}
varp1=newPerson();
varp2=newPerson();
p1.info.name='我是p1';
p2.info.name='我是p2';
console.log(p1.info.name);//我是p2
console.log(p2.info.name);//我是p2
分析:p1,p2都是实例化出来的对象,p1.info和p2.info都是指向同一块堆内存,给p1.info.name赋值,和给p2.info.name赋值修改的都是同一个地方,由于代码从上到下依次执行,那么在console的时候自然都是打印出'我是p2'。总结:由此可以看出原型内的引用类型的属性是共享的。
实践二:原型的引用类型,当实例化后并重新给引用类型属性赋值,地址发生变化。
varPerson=function(){};
Person.prototype={
info:{
"name":"Tom"
}
}
varp1=newPerson();
varp2=newPerson();
p1.info={"name":"哈哈"};;
console.log(p1.info.name);//哈哈
console.log(p2.info.name);//Tom
分析:上面代码当执行到p1.info={"name":"哈哈"}的时候,p1的info这个引用类型的属性,指向了新的地址。而p2.info没有做出任何修改,还是指向对象原型中的那个地址。
实践三:对象中值类型的属性不共享
varPerson=function(name,age){
this.name=name;
this.age=age;
};
varp1=newPerson('Tom',10);
varp2=newPerson('Lucy','8');
console.log(p1.name);//Tom
console.log(p2.name);//Lucy
实践四:属性屏蔽理论
varPerson=function(){
this.name='小明',
this.buy=function(){
console.log('去买面包');
}
};
Person.prototype={
name:"原型中的小明",
buy:function(){
console.log('去买汽水');
},
age:10
}
varp=newPerson();
//正常情况下我们去访问p里的属性和方法。
//可以看出原型中的属性和方法的优先级没有构造函数中的高,如果构造函数中没有,会去原型中查找
console.log(p.name);//小明
p.buy();//控制台输出去买面包
console.log(p.age);//10
//如果我们要访问原型中的属性和方法可以这样
deletep.name;//此处会删除构造函数中的属性
console.log(p.name);//原型中的小明
Person.prototype.buy();//控制台输出去买汽水
实践五:对象中的hasOwnProperty方法
varPerson=function(){
this.name='Tom';
}
Person.prototype={
age:30
}
varp=newPerson();
console.log(Person.hasOwnProperty('name'));//true
console.log(p.hasOwnProperty('name'));//true
console.log(Person.hasOwnProperty('age'));//false
console.log(p.hasOwnProperty('age'));//false
varClassRoom={
contain:100,
leader:'小明',
teacher:'王老师'
}
console.log(ClassRoom.hasOwnProperty('leader'));//true
console.log(p.hasOwnProperty===Object.prototype.hasOwnProperty);//true
console.log(Person.hasOwnProperty===Object.prototype.hasOwnProperty);//true
console.log(ClassRoom.hasOwnProperty===Object.prototype.hasOwnProperty);//true
分析:上面说明了一个问题,hasOwnProperty这个方法是看是不是对象自身下面的属性,可以用对象和实例对象访问,并且只会去找构造函数和字面量中的属性并且hasOwnProperty继承自Object
实践六:自定义对象中的constructor和__proto__(有关原型链的问题,我们以后再来说)
/*每个实例对象都会默认生成一个constructor和__proto__属性这一条不管是内置对象还是自定义对象都是一样的*/
functionA(){};
vara=newA();
console.log(a.constructor===A);//true默认情况下实例的constructor指向实例的构造函数
console.log(a.__proto__===A.prototype);//true默认情况下,实例的__proto__属性指向类的prototype
/*当我们修改constructor和__proto__属性时候*/
functionB(){};
//手动修改原型链
B.prototype={
__proto__:String.prototype
}
varb=newB();
//instanceof用来判断obj1是否是obj2的一个实例,可见用instanceof来判断数据类型也是不准确的。
//这里涉及到继承,而js面向对象中的继承就是通过原型链来实现的。
console.log(binstanceofB);//true
console.log(binstanceofString);//true
console.log(binstanceofObject);//true
console.log(b.constructor===B);//false此处b的构造函数不是B了,因为原型链指到String上去了。
console.log(b.constructor===String);//true
//手动修改b的constructor,如果自己不设置,那么就会去寻找原型链,如上
//b.constructor=B;或者B.prototype.constructor=B;
//手动设置后,就会按照设置的来走,如下:
b.constructor=B;
console.log(b.constructor===B);//true
console.log(b.__proto__===B.prototype);//true
console.log(B.prototype.__proto__===String.prototype);//true;
//下面这两个也是原型链的内容
//B是函数,函数的constructor是Function,函数的__proto__是Function.prototype
console.log(B.constructor===Function);//true
console.log(B.__proto__===Function.prototype);//true
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。