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 相关文章推荐
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
Vue中key的作用示例代码详解
Jun 10 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比较两个绝对时间的大小
2014/01/31 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python多线程并发实例及其优化
2019/06/27 Python
python 实现dict转json并保存文件
2019/12/05 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python中count函数简单用法
2020/01/05 Python
python如何写try语句
2020/07/14 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
领导班子自我剖析材料
2014/08/16 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
vue封装数字翻牌器
2022/04/20 Vue.js
如何使用python包中的sched事件调度器
2022/04/30 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL