javascript面向对象程序设计实践常用知识点总结
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了javascript面向对象程序设计实践常用知识点,结合实例形式分析了javascript面向对象程序设计中原型引用类型、属性、方法相关操作技巧与注意事项,需要的朋友可以参考下
本文实例讲述了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); // 我是p2 console.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); // Tom console.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')); // true console.log(p.hasOwnProperty('name')); // true console.log(Person.hasOwnProperty('age')); // false console.log(p.hasOwnProperty('age')); // false var ClassRoom = { 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 这个方法是看是不是对象自身狼蚁网站SEO优化的属性,可以用对象和实例对象访问,并且只会去找构造函数和字面量中的属性并且 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); // true console.log(b instanceof String); // true console.log(b instanceof Object); // 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; // 狼蚁网站SEO优化这两个也是原型链的内容 // B是函数,函数的constructor 是 Function,函数的__proto__ 是Function.prototype console.log(B.constructor === Function); // true console.log(B.__proto__ === Function.prototype); // true
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程