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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
javascript实现时钟动画
Dec 03 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python集合操作方法详解
2020/02/09 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
自我推荐书
2013/12/04 职场文书
优秀实习生感言
2014/03/01 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
入党积极分子个人总结
2015/03/02 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2015大学生入党个人自传
2015/06/26 职场文书