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程序设计有所帮助。