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 13 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
JSX在render函数中的应用详解
Sep 04 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python中的Numpy入门教程
2014/04/26 Python
import的本质解析
2017/10/30 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python opencv实现运动检测
2018/07/10 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
新手入门Mysql--概念
2021/06/18 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers