题解:逻辑运算符、运算符的优先级、声明变量和声明函数的提升优先级、原型继承、闭包、覆盖等知识点。

这篇博客解析了JavaScript中关于逻辑运算符、函数声明和变量声明的提升优先级、原型继承以及闭包的相关知识。通过一系列的代码示例,解释了函数执行的具体过程,包括`new`操作符的应用和作用,以及在不同上下文中函数调用的行为差异。

所遇面试题解析

题目如下:

   function Foo() {
		getName = function () { 
			console.log (1); 
		};
		console.log('this is'+this)
	    return this;
	}
	Foo.getName = function () { 
		console.log (2); 
	};
	Foo.prototype.getName = function () { 
		console.log(3); 
	};
	var getName = function () { 
		console.log (4);
	};
	function getName() { 
		console.log (5);
	}
 
	// 请写出一下的输出结果
	① Foo.getName(); 
	② getName(); 
	③ Foo().getName();  
	④ getName();  
	⑤ new Foo.getName();  
	⑥ new Foo().getName();  
	⑦ new new Foo().getName(); 

题目的答案为① Foo.getName(); // 2
②getName(); // 4
③Foo().getName(); // 1
④getName(); // 1
⑤new Foo.getName(); // 2
⑥new Foo().getName(); //3
⑦new new Foo().getName(); // 3

解析:

//第一部分:一个构造函数里面有个全部变量getName 指向一个匿名函数
function Foo() {
getName = function () {
console.log (1);
};
return this;
}
// 第二部分:构造函数的一个属性getName 指向一个匿名函数
Foo.getName = function () {
console.log (2);
};
// 第三部分:构造函数的原型上有个getName方法
Foo.prototype.getName = function () {
console.log(‘baidu’ && ‘google’);
};
// 第四部分:定义一个变量指针指向一个匿名函数
var getName = function () {
console.log (4);
};
// 第五部分:声明一个叫getName的有名函数
function getName() {
console.log (5);
}

每块函数的意义都清楚了吧,接下来再分析执行语句的代码:

①Foo.getName() :
容易和第三部分相混淆,虽然第三部分是给 Foo添加了一个原型,但是Foo.getName() 调用不到原型里面里面的东西。就是调用第二部分的函数代码块,结果为“2”!

② getName();
如果单独看这条执行语句,一般会有个全局声明的第五部分的"function getName(){} ",但要是放在这么个复杂的上下文环境中,那肯定是不一样的啦,因为还有个第四部分 “var getName = function(){}” 来捣乱,为什么输出4而不是5,这里考的是变量提升与函数声明提升。我们知道使用var声明变量会存在变量提升的情况,比如下面的例子中,即使在声明前使用变量a也不会报错,这是因为声明提前会让声明提升到代码的最上层,而赋值操作停留在原地,而函数声明(注意是函数声明,不是函数表达式或者构造函数创建函数)也会存在声明提前的情况,即我们可以在函数声明前调用函数。
变量声明会提升,函数声明也会提升,谁提升的更高呢?在JavaScript中明确指出,函数声明会被优先提升,也就是说都是提升,但是函数比变量提升更高。所以题目中的两个函数顺序可以改写成:

     function getName() {
    console.log(5);
};
var getName;
getName = function () {
    console.log(4);
};

③Foo().getName();
本句,有个执行顺序的,先一部分的“Foo()”,结果是"this" 并指向window,并产生了一个全局getName(window.getName)指针指向一个匿名函数,然后再执行"this.getName()" , 其实就是执行刚刚造出来的那个全局getName指向的匿名函数,所以输出“1”.

④getName();
这里输出1已经毫无悬念,上一分析中,getName的值在Foo执行时被修改了,所以再调用getName一样等同于window.getName(),同样是输出1。

⑤new Foo.getName();
首先还是先看运算符优先级吧,我自个看完的结果是【new Foo() > Foo() > new Foo】,先运算方式2的Foo.getName() 结果为“2”,再new一个Foo实例对象。因此这里new的过程就相当于单纯把Foo.getName执行了一遍输出2,然后返回了一个空的实例,

⑥new Foo().getName();
这里考了new基本概念,首先这个调用分为两步,第一步new Foo()得到一个实例,第二步调用实例的getName方法。
我们知道new一个构造函数的过程大致为,以构造函数原型创建一个对象(继承原型链),调用构造函数并将this指向这个新建的对象,好让对象继承构造函数中的构造器属性,如果构造函数没有手动返回一个对象,则返回这个新建的对象。
所以在执行new Foo()时,先以Foo原型创建了一个对象,由于Foo.prototype上事先设置了一个getName方法(输出3的那个),所以这个对象可通过原型访问到这个方法,其次由于Foo内部也没提供什么构造器属性,最终返回了一个this(这个this指向实例),因此这里的this还是等同于我们前面概念提到的以Foo原型创建的对象,可以尝试输出这个实例,除了原型上有一个getName方法就没有其它任何属性,因此这里输出3。
我们可以将Foo函数改写成下面这样,其它不变,猜猜new Foo().getName()输出什么:

```javascript
`function Foo() {
    getName = function () {
        console.log(1);
    };
    return {
        getName: function () {
            console.log(6);
        }
    };
};`

>>⑦new new Foo().getName();    
        先执行new Foo(),变成了 new Foo的实例对象.getName(), 然后再执行 Foo的实例对象.getName(),
        又回到了方式3函数块,结果为“google”,最后执行new Foo的实例对象。


评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值