博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
这可能是需要系统学js的人最重要且容易被忽略的一些概念
阅读量:5882 次
发布时间:2019-06-19

本文共 1947 字,大约阅读时间需要 6 分钟。

写这篇文章之前是看了讲关于箭头函数中this指向的问题,于是借此把相关的函数,构造函数,new,this,箭头函数的一些概念结合自己的理解又理了一遍,想着好好复习一下,最后有了写这篇文章的想法。我不太喜欢说一些太专业的话(自己菜,没法专业),所以都是自己理解以及自己总结最后得出的结论,首先看下下面这四个控制台的输出结果:

1.var a = 11function test () {    this.a = 22    let b = function () {        consolve.log(this.a)    }    b()}var x = new test()  =>  11x.a  =>  222.var a = 11function test () {    this.a = 22    let b = function () {        consolve.log(this.a)    }    b()}var x = test()  =>  22x.a  =>  Uncaught TypeError: Cannot read property 'a' of undefined3.var a = 11function test () {    this.a = 22    let b = () => {        consolve.log(this.a)    }    b()}var x = new test()  =>   22x.a  =>  224.var a = 11function test () {    this.a = 22    let b = () => {        consolve.log(a)    }    b()}var x = new test()  =>   11x.a  =>  22

如果你耐心得看完了这四段,并且你所想的结果就是控制台的结果,那接下去你就可以不用看了,因为我要讲的你应该都懂,不过如果你有某段不明白,或者大部分不清楚,那下面的内容还是很值得看看并且理解理解的,毕竟这些真的蛮重要。

首先提几个概念:

执行上下文(执行环境):当JavaScript代码执行的时候,会进入不同的执行上下文,这些执行上下文会构成了一个执行上下文栈(Execution context stack,ECS)。这个上下文栈就是js执行程序的基础。

this: 它是动态的,有人称它为动态上下文,我觉得不太对,this指向一个环境对象(代表这个执行环境),这是一个对象,而且是一个普通对象,而不是指向一个执行环境。

以下是我自己结合上面的内容的总结:

函数(function): 函数它自己就是一个对象,它用来装一些等着执行的代码,像层壳一样,你不用它,它里面的代码是不会执行的,它身上绑着this(所以函数有自己的执行环境)。

new : 用到new说明有函数被当作构造函数来调用了。new会返回一个对象,像这里var x = new test()的变量x就指向这个返回出来的对象,new在返回对象之前会把函数壳里面的代码拿出来执行一遍,但是,此时壳被剥去了,构造函数里面的函数执行环境自然就变了,就像这里的:

let b = () => {       consolve.log(this.a)   }   b()

自然b()暴露给了这会儿在外面的执行环境(控制台的话是window),但是构造函数会将自己的this给它创建出来的对象(也可以说给出的this成了这个对象),于是this.a = 22a这个属性被挂到了新建的对象上。

最后专业点的话可以这样模拟一下new做的一系列操作(这样就扯到原型链继承的东西了这里暂时不需要管):

new Animal("cat") = {    var obj = {};  // 新建一个对象    obj.__proto__ = Animal.prototype;  // 实现原型链    var result = Animal.call(obj,"cat");  // 用call给this    return typeof result === 'object'? result : obj;}

箭头函数:这个es6出来的,现在运用广泛的东西跟函数有点不太一样,我这里只讨论一点,就是它自己身上根本没绑着this。所以在它里面调用this需要往父级去找,也就是它的this是继承自父执行环境的,而不是像有些人对其的解释,它的this一开始就固定了。也正是因为它没有this,所以也就不能用作构造函数,也就没法new。虽然最后结果是对的,但解释不太对。

转载地址:http://gkvix.baihongyu.com/

你可能感兴趣的文章
一起谈.NET技术,ASP.NET伪静态的实现及伪静态的意义
查看>>
20款绝佳的HTML5应用程序示例
查看>>
string::c_str()、string::c_data()及string与char *的正确转换
查看>>
11G数据的hive初测试
查看>>
如何使用Core Text计算一段文本绘制在屏幕上之后的高度
查看>>
==和equals区别
查看>>
2010技术应用计划
查看>>
XML 节点类型
查看>>
驯服 Tiger: 并发集合 超越 Map、Collection、List 和 Set
查看>>
Winform开发框架之权限管理系统改进的经验总结(3)-系统登录黑白名单的实现...
查看>>
Template Method Design Pattern in Java
查看>>
MVC输出字符串常用四个方式
查看>>
LeetCode – LRU Cache (Java)
查看>>
JavaScript高级程序设计--对象,数组(栈方法,队列方法,重排序方法,迭代方法)...
查看>>
【转】 学习ios(必看经典)牛人40天精通iOS开发的学习方法【2015.12.2
查看>>
在 ASP.NET MVC 中使用异步控制器
查看>>
SQL语句的执行过程
查看>>
Silverlight开发历程—动画(线性动画)
查看>>
详解Linux中Load average负载
查看>>
HTTP 协议 Cache-Control 头——性能啊~~~
查看>>