javascript 易错知识点实例小结


Posted in Javascript onApril 25, 2020

本文实例总结了javascript 易错知识点。分享给大家供大家参考,具体如下:

为什么 typeof null === 'object'

原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为 object 类型, null 的二进制表示是全0,自然前三位也是0,所以执行 typeof 时会返回“ object ”。

对象属性的存在性

如 myObject.a 的属性访问返回值可能是 undefined ,但是这个值有可能是属性中存储的 undefined ,也可能是因为属性不存在所以返回 undefined 。那么如何区分这两种情况呢?

var myObject = {
  a:2
};

// 方案一
("a" in myObject); // true
("b" in myObject); // false

// 方案二
myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

// 方案三
Object.prototype.hasOwnProperty.call(myObject, 'b')

对象继承的三种方法

参考如下代码:

function Foo(name) {
			this.name = name;
		}

		Foo.prototype.myName = function() {
			console.log(this.name)
		}

		function Bar(name, label) {
			Foo.call(this, name);
			this.label = label;
		}
        
        // 方法1
		Bar.prototype = Object.create(Foo.prototype)
        
        // 方法2
		Bar.prototype = Foo.prototype;

        // 方法3
        Bar.prototype = new Foo();

		//Bar.prototype.constructor = Bar;

		Bar.prototype.sayName = function() {
			console.log(this.name)
		}

		
		var b = new Foo('fayin')
	
		b.sayName()

上例中,三种方法都可以使 Bar 继承 Foo.prototype 上的方法,但它们之间又有微妙的差别:

Object.create(..) 会凭空创建一个“新”对象并把新对象内部的 [[Prototype]] 关联到你指定的对象(本例中是 Foo.prototype )。

Bar.prototype = Foo.prototype 并不会创建一个关联到 Bar.prototype 的新对象,它只是让 Bar.prototype 直接引用 Foo.prototype 对象。因此当你执行类似 Bar.prototype.myLabel = ... 的赋值语句时会直接修改 Foo.prototype 对象本身。

Bar.prototype = new Foo() 的确会创建一个关联到 Bar.prototype 的新对象。但是它使用了 Foo(..)的“构造函数调用”,如果函数 Foo 有一些副作用(比如写日志、修改状态、注册到其他对象、给 this 添加数据属性,等等)的话,就会影响到 Bar() 的“后代”,后果不堪设想。

结论

因此,要创建一个合适的关联对象,我们必须使用 Object.create(..) 而不是使用具有副作用的 Foo(..) 。这样做唯一的缺点就是需要创建一个新对象然后把旧对象抛弃掉,不能直接修改已有的默认对象。

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

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

Javascript 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 #Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 #Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 #Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 #Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Order by的几种用法
2013/06/16 面试题
公积金单位接收函
2014/01/11 职场文书
优秀语文教师事迹
2014/05/18 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL