谈谈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 相关文章推荐
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
原生js实现回复评论功能
Jan 18 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
JavaScript实现网页动态生成表格
Nov 25 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新手上路(十)
2006/10/09 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
javascript实现点击产生随机图形
2021/01/25 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python反编译学习之字节码详解
2019/05/19 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python中count函数知识点浅析
2020/12/17 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
《红军不怕远征难》教学反思
2014/04/14 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
教师节学生演讲稿
2014/09/03 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS