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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Javascript的比较汇总
Jul 25 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
vuex存储token示例
Nov 11 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
培养自己的php编码规范
2015/09/28 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
推荐dojo学习笔记
2007/03/24 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Django实现组合搜索的方法示例
2018/01/23 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python2 对excel表格操作完整示例
2020/02/23 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
专升本个人自我评价
2013/12/22 职场文书
21岁生日感言
2014/02/27 职场文书
一年级小学生评语
2014/04/22 职场文书
环境日宣传活动总结
2014/07/09 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
初中作文评语集锦
2014/12/25 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android