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写的一个自定义弹出式对话框代码
Jan 17 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
法律专业应届本科毕业生求职信
2013/10/25 职场文书
工作中个人的自我评价
2013/12/31 职场文书
护理目标管理责任书
2014/07/25 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
年终工作总结范文
2019/06/20 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS