谈谈JavaScript的New关键字


Posted in Javascript onAugust 26, 2016

原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些。(跟标题的关系不大啦,就感慨句,每次总感觉自己懂了,再翻还是收获满满)

先谈一下JavaScript中New关键字吧,通常我们通过它来创建一个类的实例对象,在JavaScript中,实例化对象之后,也就继承了类的属性以及方法。通过代码来演示一下 

function Person(name){
 this.name = name;
}
Person.age= "23";
Person.prototype.say = function(){
 console.log("I'm " + this.name);
};
var person= new Person("王方");
 
console.log(
 person.name, //王方
 person.height //undefined
);
person.say(); //I'm 王方
 
console.log(
 Person.name, //Person
 Person.age//23
);
Person.say(); //Person.say is not a function

我们看下这一行 
var person= new Person("王方");
new 到底做了什么呢?恩 JS引擎做的工作就是下面这样  

var obj = {};
obj.__proto__ = Person.prototype;
var result = Person.call(obj,"王方");
return typeof result === 'obj'? result : obj;

1.首先创建一个新对象 

2.把obj的__proto__ 指向Person的原型对象prototype,此时便建立了obj对象的原型链:obj->Person.prototype->Object.prototype->null 

3.在obj对象的执行空间调用Person函数并传递参数“王方”。 相当于var result = obj.Person("王方")。当这句执行完之后,obj便产生了属性name并赋值为"王方"。 

4.判断返回值,如果无返回值或者返回一个非对象值,就将obj返回,否则讲返回值作为新对象返回(有点绕口,三元运算符,自己看下吧) 

总结:
 Javascript的new关键字主要的作用是继承,如上例子所言,但是要记住一点,Person是一个函数,而person是一个对象,至于函数与对象之间的区别,我有时间再写吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JS获取时间的方法
Jan 21 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
React组件refs的使用详解
Feb 09 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 #Javascript
针对JavaScript中this指向的简单理解
Aug 26 #Javascript
轻松掌握JavaScript代理模式
Aug 26 #Javascript
轻松掌握JavaScript单例模式
Aug 25 #Javascript
很酷的星级评分系统原生JS实现
Aug 25 #Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 #Javascript
轻松掌握JavaScript策略模式
Aug 25 #Javascript
You might like
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
深入浅析php json 格式控制
2015/12/24 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vuex存储token示例
2019/11/11 Javascript
iview实现图片上传功能
2020/06/29 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python验证身份证信息实例代码
2019/05/06 Python
django框架模板语言使用方法详解
2019/07/18 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python Tensor和Array对比分析
2020/01/08 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
监督检查工作方案
2014/05/28 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
建议书格式
2015/02/04 职场文书
现役军人家属慰问信
2015/03/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
高中班长竞选稿
2015/11/20 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android