javascript面向对象程序设计实践常用知识点总结

前端  /  管理员 发布于 4年前   285

本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考，具体如下：

实践一：原型中的引用类型的属性是共享的

var Person = function(){};Person.prototype = {  info:{    "name":"Tom"  }}var p1 = new Person();var p2 = new Person();p1.info.name = '我是p1';p2.info.name = '我是p2';console.log(p1.info.name); // 我是p2console.log(p2.info.name); // 我是p2

分析：p1,p2都是实例化出来的对象，p1.info 和p2.info 都是指向同一块堆内存，给p1.info.name赋值，和给p2.info.name赋值修改的都是同一个地方，由于代码从上到下依次执行，那么在console的时候自然都是打印出 '我是p2'。总结：由此可以看出原型内的引用类型的属性是共享的。

实践二：原型的引用类型，当实例化后并重新给引用类型属性赋值，地址发生变化。

var Person = function(){};Person.prototype = {  info:{    "name":"Tom"  }}var p1 = new Person();var p2 = new Person();p1.info = {"name":"哈哈"};;console.log(p1.info.name); // 哈哈console.log(p2.info.name); // Tom

分析：上面代码当执行到 p1.info = {"name":"哈哈"}的时候，p1的info这个引用类型的属性，指向了新的地址。而p2.info 没有做出任何修改，还是指向对象原型中的那个地址。

实践三：对象中值类型的属性不共享

var Person = function(name,age){  this.name = name;  this.age = age;};var p1 = new Person('Tom',10);var p2 = new Person('Lucy','8');console.log(p1.name); // Tomconsole.log(p2.name); // Lucy

实践四：属性屏蔽理论

var Person = function () {  this.name = '小明',  this.buy = function () {    console.log('去买面包');  }};Person.prototype = {  name:"原型中的小明",  buy:function() {    console.log('去买汽水');  },  age:10}var p = new Person();// 正常情况下我们去访问p里的属性和方法。// 可以看出原型中的属性和方法的优先级没有构造函数中的高，如果构造函数中没有，会去原型中查找console.log(p.name);// 小明p.buy();// 控制台输出 去买面包console.log(p.age); // 10// 如果我们要访问原型中的属性和方法可以这样delete p.name; // 此处会删除构造函数中的属性console.log(p.name);// 原型中的小明Person.prototype.buy(); // 控制台输出 去买汽水

实践五：对象中的 hasOwnProperty 方法

var Person = function () {  this.name = 'Tom';}Person.prototype = {  age:30}var p = new Person();console.log(Person.hasOwnProperty('name')); // trueconsole.log(p.hasOwnProperty('name')); // trueconsole.log(Person.hasOwnProperty('age')); // falseconsole.log(p.hasOwnProperty('age')); // falsevar ClassRoom = {  contain:100,  leader:'小明',  teacher:'王老师'}console.log(ClassRoom.hasOwnProperty('leader')); // trueconsole.log( p.hasOwnProperty === Object.prototype.hasOwnProperty ); //trueconsole.log( Person.hasOwnProperty === Object.prototype.hasOwnProperty ); //trueconsole.log( ClassRoom.hasOwnProperty === Object.prototype.hasOwnProperty ); //true

分析：上面说明了一个问题，hasOwnProperty 这个方法是看是不是对象自身下面的属性，可以用对象和实例对象访问，并且只会去找构造函数和字面量中的属性并且 hasOwnProperty 继承自 Object

实践六：自定义对象中的 constructor 和 __proto__(有关原型链的问题，我们以后再来说)

/* 每个实例对象都会默认生成一个constructor 和 __proto__ 属性 这一条不管是内置对象还是自定义对象都是一样的 */function A() {};var a = new A();console.log(a.constructor === A); // true 默认情况下实例的constructor指向实例的构造函数console.log(a.__proto__ === A.prototype); // true 默认情况下，实例的__proto__属性指向类的prototype/* 当我们修改 constructor 和 __proto__ 属性时候 */function B() {};// 手动修改原型链B.prototype = { __proto__:String.prototype}var b = new B();// instanceof 用来判断obj1是否是obj2的一个实例，可见用 instanceof 来判断数据类型也是不准确的。// 这里涉及到继承，而js面向对象中的继承就是通过原型链来实现的。console.log(b instanceof B); // trueconsole.log(b instanceof String); // trueconsole.log(b instanceof Object); // trueconsole.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); // trueconsole.log(b.__proto__=== B.prototype); // trueconsole.log(B.prototype.__proto__=== String.prototype); // true;// 下面这两个也是原型链的内容// B是函数，函数的constructor 是 Function，函数的__proto__ 是Function.prototypeconsole.log(B.constructor === Function); // trueconsole.log(B.__proto__ === Function.prototype); // true

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools..net.cn/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

• JavaScript面向对象程序设计中对象的定义和继承详解
• javascript面向对象创建对象的方式小结
• javascript面向对象三大特征之多态实例详解
• javascript面向对象三大特征之继承实例详解
• javascript面向对象三大特征之封装实例详解
• Javascript 面向对象（一）(共有方法，私有方法，特权方法)
• 面向对象的Javascript之二(接口实现介绍)
• js面向对象之公有、私有、静态属性和方法详解
• javascript面向对象入门基础详细介绍
• JavaScript 面向对象基础简单示例