浅谈 JavaScript new 执行过程及function原理

前言

  最近在学习JavaScript语言精粹,感觉写得相当不错。所以这里也算是总结一下。一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢

  另外学的过程中,不断参照ECMAScript的API,也能理解不少东西。ECMAScript Api:下载地址 W3C参考地址:http://www.w3school.com.cn/js/pro_js_functions.asp

正文 

  1.首先,看个例子,看下面例子的输出。

  

  结果通过new运算符执行结果与直接执行函数结果不一样。new返回了一个对象

  2.那么如果Person方法本身返回一个对象呢。看下图

  

  结果这次到时按照return的结果直接返回了,和直接执行有一样了

  所以我们可以试着得出一个结论:new运算符 会根据方法返回值的不同,执行方式是不一样的。

  3.然后,new 会改变this的指向,这个大家应该都知道,不过我们还是再说一下

  直接作为函数执行this指向window

  

  在使用new运算符后的this,却指向当前对象了

  

  所以我们也可以得出一个结论::使用new运算符后的this指向当前对象

  4.接下来,我们说Person声明的问题,如下图:

  

  Person刚生下来怎么会有这么多属性?applu,bind,call,lenth都是从哪里来的?

  5.带着这个问题,我们来看个例子(方法的另外一种声明方式):

  

  你可能首先会问你为啥知道Function能这样用?那就来看一下w3c的说明):

  

  其实function Person(){}具体的执行就是调用Function()构造函数进行构造的,最后一个参数是函数体

  如果他是Function的一个实例,Person有那么多属性/方法,也就是Function对象的了。看下Function源码你就知道了!

  那你可能会问?不对啊!Function的属性明显没有Person多啊,其他的哪来的?再来看张截图

Function中少的那些个属性其实都是Object的属性,Object的源码就不贴出来了,前面的ECMAScript Api文档里都有说明,在这里也截个图(有空你可以把Object+Function属性方法加起来,看是不是正好)。

其实Function应该也是一个Object,所以也会带有Object的一系列属性/方法(Object与Function有着千丝万缕的关系,不能展开说了,涉及的太多了)

说完Function(虽然有点离题,但是能帮助我们理解好多东西)。我们继续正题模拟实现new吧。

其实new这个运算符是啥,可以当它是一个方法,方法里面就是执行初始化的过程,可学习javascript语言精粹中的讲解。具体模拟实现如下,都在注释里说了(也就只能模拟下,因为看不到内部啊):

不多说一看就懂了……

总结

其实有好多点都可以扩展开讲,比如_proto_咋回事,apply原理等,太多太多了,一时间也说不完。有空在写一篇。本文也是为了自己总结加深记忆。可能会有些地方理解的有错误,请大家及时指出

  

  

  

  

时间: 2024-12-23 00:42:27

浅谈 JavaScript new 执行过程及function原理的相关文章

《浅谈JavaScript系列》系列技术文章整理收藏

<浅谈JavaScript系列>系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对象编程 5浅谈javascript的数据类型检测 6浅谈Javascript嵌套函数及闭包 7根据一段代码浅谈Javascript闭包 8浅谈JavaScript编程语言的编码规范 9浅谈Javascript面向对象编程 10浅谈JavaScript

浅谈 JavaScript 编程语言的编码规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

浅谈javascript函数劫持

http://www.xfocus.net/articles/200712/963.html 浅谈javascript函数劫持 文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_at_yahoo.cn http://www.ph4nt0m.org 一.概述 javascript函数劫持,也就是老外提到的javascript hijacking技术.最早还是和剑心同学讨论问题时偶然看到的一段代码,大

浅谈JavaScript运行机制

浅谈JavaScript运行机制 ? 想要了解一门语言,最好的办法就是了解它的运行机制.掌握了运行机制,能够让我们在开发中少走许多弯路,写出高质量的代码.本文简单介绍什么是JavaScript的运行机制,给刚刚接触JavaScript的小白一个初步的了解,为将来打好基础. 一.JavaScript 代码运行分两个阶段: 1.预解析---把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2.执行---从上到下执行(按照js运行机制) 二.JavaScript运行机制的特点 1.JavaS

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

浅谈javascript的原型及原型链

浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为该函数创建一个prototype属性,指向该函数的原型对象.实例对象是不会拥有该属性的.默认情况下,该原型对象也会获得一个constructor属性,该属性包含一个指针,指向prototype属性所在的函数. Person.prototype.constructor===Person [[proto

Javascript的执行过程详细研究

下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析. 1.1  按HTML文档流顺序执行JavaScript代码 首先,读者应该清楚,HTML文档在浏览器中的解析过程是这样的:浏览器是按着文档流从上到下逐步解析

浅谈JavaScript中的原型模式

在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">//工厂模式 function createPerson(name,age,job) { var o = new Object; o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } retur