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


Posted in Javascript onJuly 29, 2019

本文实例讲述了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 这个方法是看是不是对象自身下面的属性,可以用对象和实例对象访问,并且只会去找构造函数和字面量中的属性并且 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;
// 下面这两个也是原型链的内容
// B是函数,函数的constructor 是 Function,函数的__proto__ 是Function.prototype
console.log(B.constructor === Function); // true
console.log(B.__proto__ === Function.prototype); // true

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

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

Javascript 相关文章推荐
innerText和textContent对比及使用介绍
Feb 27 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
vue源码nextTick使用及原理解析
Aug 13 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
You might like
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
用Node提供静态文件服务的方法
2018/07/06 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
react MPA 多页配置详解
2019/10/18 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
三好学生演讲稿范文
2014/04/26 职场文书
销售岗位职责范本
2014/06/12 职场文书
人事任命通知书
2015/04/21 职场文书
小学体育组工作总结
2015/08/13 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
索尼ICF-5900W收音机测评
2022/04/24 无线电