【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级
参考资料http://caibaojian.com/toutiao/5446
1、所有变量声明(var)或者声明函数都会被提升到当前函数顶部
关于函数表达式,js会将代码拆分为两行代码分别执行。这里需要注意的是
var getName 和 function getName都是声明语句,区别在于var getName是函数表达式,function getName是函数声明,这里使用var进行函数声明和变量声明时一样的,都是声明提前至当前函数最顶部,二函数声明是将函数声明提升至当前函数顶部。(这个有点绕,但是可以看到本质就是声明提前,function getName整个是函数声明,声明提前,而var getName后接的是函数表达式,和声明变量一样,声明提前,赋值留在原地。)
(实名函数和匿名函数,这个说法可能会更熟悉一些,
实名函数:不论声明在哪里都会在其他代码执行前,被提升到当前作用域最顶端以准备被调用;
匿名函数:(函数的表达式的表达形式)实际上是个变量,在声明之前无法被调用。)
console.log(x); var x = 1; function x(){};
这三行简单的代码,var x = 1;将被拆分为var x;x=1;两个部分,声明提前至当前函数顶部,赋值留在原地,而函数表达式也会提升至当前函数最上方。
var x; function x(){}; console.log(x); x=1;
实际运行过程中函数如上顺序执行,因此输出x为function(){}。
当没有进行var声明的时候,需要在当前函数作用域寻找是否存在该变量声明,如果没有,则向上一层继续寻找,注意,如果此处依然没有,那么会向上寻找直至window对象,若window对象中也没有该属性,那么就会在window中创建该变量。
2、this指向是由所在函数的调用方式来决定的。
3、关于构造函数
构造函数不能直接被调用,必须通过new运算符在创建对象时才会自动调用,一般当函数执行到的时候自动调用。
4、this在构造函数中代表当前实例化对象。
题目
function Foo(){ getName = function(){alert(1);}; } Foo.getName = function(){alert(2);}; Foo.prototype.getName = function(){alert(3);}; var getName = function(){alert(4);}; function getName(){alert(5);}; (1)Foo.getName(); (2)getName(); (3)Foo().getName(); (4)getName(); (5)new Foo.getName(); (6)new Foo().getName(); (7)new new Foo().getName();
在理解了上面的话以后前四题应该是非常简单的,归根结底一句话,变量声明和声明函数提前至当前函数顶部。
(1),直接调用Foo.getName(),输出2;
(2),getName(),函数顺序执行,这里我们看到var getName和function getName函数表达式即将var getName 提至顶部,下面将函数声明提前,那么是先运行的function getName(){alert(5);};后执行getName = function(){aleert(4);};后面将前面覆盖了,输出4。
(3),显然先调用Foo函数,第一个调用以后,这里运行了getName = function(){alert(1)}这是一个函数表达式,我们先看当前函数内部是否存在变量声明,并没有那么找到外面,var getName = function(){alert(4);};这里就覆盖了这个函数表达式,进行新的赋值。此处return this,即执行this.getName(),此处直接调用,那么this指向window。输出1.
(4),经过上一步运行,getName()被覆盖,依然输出1。
5~7题
主要是构造函数通过new进行实例化。
(5),new(Foo.getName)(),将getName函数通过构造函数来执行,输出2
这里有一个构造函数的返回值问题。
在js构造函数中可以有返回值也可以没有,我们这样看
function F(){}; >undefined new F(); >F {}
如果有返回值,检查检查值是否是引用类型,如果是非引用类型,如基本类型(string、number、boolean、null、undefined)则与无返回值相同,实际返回其实例化对象。
如果是引用类型,那么实际返回值为引用类型。
function f(){return true;}; >undefined new f(); >f {}
function f(){return {1:"a"}}; >undefined new f(); >Object {1: "a"}
此处返回值为this,this在构造函数中表示当前实例化对象,因此返回当前实例化对象。因为在Foo构造函数中没有为构造函数添加任何属性,因此到当前对象的原型对象(prototype)中寻找getName,找到了。
(6)(7)输出3.
【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级的更多相关文章
- JavaScript 变量声明提升
JavaScript 变量声明提升 一.变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动 二.在基本的语句(或者说代码块)中(比如:if语句.for语句.while语句.swi ...
- js变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级
原文出自:http://www.cnblogs.com/xxcanghai/p/5189353.html作者:小小沧海 题目如下: function Foo() { getName = functio ...
- javascript 变量定义
一.javascript中,变量定义的位置与写在哪个<script></script>标签对内无关,只分前后顺序,写在前面的后面就能够访问,写在后面的前面会提示“未定义”. 例 ...
- javascript变量声明提升和函数声明提升
在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分. JS的解析过程分为两个阶段:预 ...
- 浅谈JavaScript变量声明提升
前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...
- JavaScript变量声明提升
JavaScript代码在被解析引擎执行前,会被“编译”把变量声明等放在合适的作用域中,如果不了解这一点,会让人产生很多疑惑. 文章:详解js变量声明提升
- javascript变量声明提升(hoisting)
javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看一段代码 1 2 3 4 5 var v = &quo ...
- 【JavaScript高级进阶】JavaScript变量/函数提升的细节总结
// 测试1 console.log('----------test1--------------'); console.log(global); // undefined var global = ...
- javascript变量名提升
预解析的过程 代码的执行过程 程序在执行过程,会先将代码读取到内存中检查,会将所有的声明在此时进行标记.所谓的标记就是让js解释器直到有这个名字,后面在使用名字的时候,不会出现未定义的错误,这个标记就 ...
随机推荐
- codeforces 581C. Developing Skills 解题报告
题目链接:http://codeforces.com/problemset/problem/581/C 题目意思:给出 n 个数:a1, a2, ..., an (0 ≤ ai ≤ 100).给出值 ...
- Spring 系列: Spring 框架简介
Spring AOP 和 IOC 容器入门(转载) 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级的.强壮的 J2EE 应用程序.dev ...
- Google推荐的图片加载库Glide介绍
英文原文 Introduction to Glide, Image Loader Library for Android, recommended by Google 译文首发 http://jco ...
- IOS - AFN
#import "ViewController.h"#import "AFNetworking.h"#import "SSZipArchive.h&q ...
- ajax加载模块实时刷新的原理
var loadMenu = function(data) { var trs = template.render('menu-list-temp', {'list': data}); ...
- 模拟赛1030d2
他[问题描述]一张长度为N的纸带, 我们可以从左至右编号为0 − N( 纸带最左端标号为0). 现在有M次操作, 每次将纸带沿着某个位置进行折叠, 问所有操作之后纸带的长度是多少.[输入格式]第一行两 ...
- Ubuntu之MaxScale安装配置
原文github:https://github.com/mariadb-corporation/MaxScale/blob/develop/Documentation/Documentation-Co ...
- JAVA作业 字符变整型相加,整型输出
从命令行接收多个数字求和输出 一.设计思想 用输入语句输入两个字符串,分别转化成整型Integer.parseInt(string),相加,将结果再转化为字符串型String.valueOf(int) ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 在python3.5下安装scrapy包
此前scrapy只支持python2.x 但是最新的1.1.0rc1已结开始支持py3了 如果电脑上安装了scrapy的依赖包,诸如lxml.OpenSSL 1.你直接下载Scrapy-1.1.0rc ...