谈谈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 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
让table变成exls的示例代码
Mar 24 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue使用codemirror的两种用法
Aug 27 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错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php基本函数汇总
2015/07/09 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python调用C语言的实现
2019/07/26 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
社区维稳工作方案
2014/06/06 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
保密工作承诺书
2014/08/29 职场文书
2014年图书室工作总结
2014/12/09 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python