美文网首页
【宠粉通道】叫我讲解的一道前端JS面试题-灵魂三问:protot

【宠粉通道】叫我讲解的一道前端JS面试题-灵魂三问:protot

作者: 魔王哪吒 | 来源:发表于2019-12-26 01:34 被阅读0次
file

作者 | Jeskson

来源 | 达达前端小酒馆

1

究竟是什么样的题目让我徒弟疑惑呢？让我们看看截图先，来源于wx群：

file

看看我是怎么回答的：

file file file file file 
function Foo() {
    getName = function () { alert (1); };
    return this;
}
var getName;
//只提升变量声明

function getName() { alert (5);}
//提升函数声明，覆盖var的声明

Foo.getName = function () { alert (2);};

Foo.prototype.getName = function () { alert (3);};

getName = function () { alert (4);};
//最终的赋值再次覆盖function getName声明

getName();
//最终输出4

看懂没呢？没看懂也别急哈：

先让我们了解函数的定义：

函数声明，可以先调用再声明

dadaFn();

function dadaFn(){
 console.log(dadaFn);
}
file 
/ 返回 f -> function
function dadaFn() {
 console.log(dadaFn);
}

函数表达式，先声明再调用：

let daDafn = function() {
 console.log("dada");
};

daDafn();
file 
let fn = function() {
    console.log(111);
}
fn(); //111
VM1188:2 111
undefined
let daDafn = function() {
 console.log("dada");
}

daDafn();
VM1197:2 dada
undefined

箭头函数：

let da = () => {};

console.log( da.prototype );
file

JavaScript prototype属性，可以让你向对象添加属性和方法：

格式：

object.prototype.name = value;

使用prototype属性向对象添加属性：

function dada (name,age) {
 this.name = name;
 this.age = age;
}

var dashu = new dada("dashucoding", 13);

dada.prototype.job = null;

dashu.job = it;

console.log(dashu.jog);

输出结果：

it

构造函数：

let da1 = new Function('a', 'b');

da1(1,2);
file 
let da1 = new Function('a', 'b');

da1(1,2);

VM65:3 Uncaught ReferenceError: b is not defined
    at eval (eval at <anonymous> (local-ntp.html:1), <anonymous>:3:1)
    at <anonymous>:3:1
(anonymous) @ VM65:3
(anonymous) @ VM64:3

let fn1 = new Function('a', 'b',  'console.log(a * b)');
fn1(1, 2); //2
VM69:3 2
undefined

预解析，变量提升的概念：

file

面试题

file 

function Foo() {
    getName = function () { console.log (1); };
    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()；

VM243:5 2
VM243:7 4
VM243:2 1
VM243:2 1
VM243:5 2
VM243:6 3
VM243:6 3

//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

变量定义提升，this指针指向，运算符优先级

原型、继承、全局变量污染、对象属性及原型属性优先级

灵魂三问:

prototype？类的prototype是什么？对象的proto是什么？

在JavaScript中，prototype对象是实现面向对象的一个重要机制。

每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

实现面向对象机制

通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。

1、该对象被类所引用，只有函数对象才可引用；
2、在new实例化后，其成员被实例化，实例对象方可调用。

同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。

定义和用法

prototype 属性使您有能力向对象添加属性和方法。

构造函数的简单介绍

file 
function Person(){
 this.name = 'dada';
}
 var boy = new Person();
console.log(boy.name); //'dada'
VM254:5 dada
undefined
file

prototype属性的作用

为了解决构造函数的对象实例之间无法共享属性的缺点，js提供了prototype属性。

js中每个数据类型都是对象（除了null和undefined）。

每个对象都继承自另外一个对象，后者称为“原型”（prototype）对象，只有null除外，它没有自己的原型对象。

原型对象上的所有属性和方法，都会被对象实例所共享。

通过构造函数生成对象实例时，会将对象实例的原型指向构造函数的prototype属性。

每一个构造函数都有一个prototype属性，这个属性就是对象实例的原型对象。

原型对象的属性不是对象实例的属性。

prototype是作为构造函数的属性

对于对象实例来说，prototype是对象实例的原型对象。

所以prototype即是属性，又是对象。

file

原型链:原型链主要用于继承，每个对象都有一个proto属性指向其构造函数的原型对象，当访问对象的属性和方法时，会先在对象自身进行查找，如果不存在,则沿着proto属性向上一级查找，直到没找到返回 undefined，这样的查找过程，称之为原型链。

原型链，请找我文章：一篇文章带你了解JavaScript中的变量，作用域，和内存问题。

function Foo() {
    getName = function () { console.log (1); };
    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();  // 2

看代码，先定义一个Foo()的函数，之后为Foo创建一个叫getName的静态属性，用来存储一个匿名的函数，之后为Foo的原型对象，新创建了一个叫getName的匿名函数。

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

然后通过函数变量表达式，创建一个getName的匿名函数，然后由通过函数变量表达式，创建一个getName的函数。

最后一个是声明一个叫getName的函数。

Foo.getName();  // 2

这个不用说就是访问Foo()函数上存储的静态属性，答为2。

下一个问：

getName();

Foo().getName();

getName();

new Foo.getName();

new Foo().getName();

new new Foo().getName()；

getName(); 的答案呢？ // 5

function Foo() {
    getName = function () { console.log (1); };
    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);}

预解析/变量提升

file 
function Foo() {
    getName = function () { alert (1); };
    return this;
}
var getName;
//只提升变量声明

function getName() { alert (5);}
//提升函数声明，覆盖var的声明

Foo.getName = function () { alert (2);};

getName = function () { alert (4);};
//最终的赋值再次覆盖function getName声明

getName();
//最终输出4

var getName 只提升变量声明

function getName 函数声明，覆盖var的声明

第二个答案

直接调用getName()函数，就是访问当前上文作用域内的叫getName的函数

file

这样var getName提升，函数整体提升到上面了，那么就剩下getName结果为4的那个了。

第三个问是：// 1

一个是变量作用域问题，一个是this指向问题。

Foo().getName();

第一个Foo()函数：

function Foo() {
 getName = function() {
  console.log('1');
 }
}

即Foo().getName()中

file

先执行Foo()函数，然后调用Foo函数返回的返回值对象的getName属性函数。

file

第四个：

getName(); // 函数 1

相当于window.getName()，因为这个变量被Foo函数执行时修改了，结果同样为1。

file

五问：

new Foo.getName();
file

点 . 的优先级高于new操作，等价于：

new (Foo.getName)();
// 将getName函数作为了构造函数来执行
// 2

六的答案：

file 
new Foo().getName(); // 3
// 运算符优先级括号高于new

等价于
(new Foo()).getName()

先执行Foo函数，此时作为构造函数，有返回值。

file

若有返回值则检查其返回值是否为引用类型

file

若返回值是引用类型，则实际返回值为这个引用类型。

file 
价于
(new Foo()).getName()
# ```
![file](https://img.haomeiwen.com/i11158618/8cf05e8df59bfce8.jpeg)

new new Foo().getName();

new ((new Foo()).getName)();

// 3



## ❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

> 【作者】：Jeskson
> 【原创公众号】：达达前端小酒馆。
> 【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
> 【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

----
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

----
## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！
### 欢迎关注[达达](https://blog.csdn.net/qq_36232611)的CSDN！

**这是一个有质量，有态度的博客**

![前端技术栈](https://img.haomeiwen.com/i11158618/f0410e4b3b41ee35.jpeg)

相关文章

  • 【宠粉通道】叫我讲解的一道前端JS面试题-灵魂三问:protot

    作者 | Jeskson 来源 | 达达前端小酒馆 1 究竟是什么样的题目让我徒弟疑惑呢？让我们看看截图先，来...

  • 前端面试 - 收藏集 - 掘金

    一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五...

  • 前端JavaScript面试技巧

    1-1 课程概述 要做什么？——讲解前端 JS 基础面试题 哪些部分？——JS 基础，JS-WEB-API，JS ...

  • 面试.md

    [TOC] 2017年第一波 JavaScript 面试题 一道常被人轻视的前端****JS面试题 目录 前言 第...

  • 前端相关大杂烩

    前端基础面试题(JS部分) 前端基础面试题(JS部分)学习 React.js 比你想象的要简单 原文地址：Lear...

  • 一道坑爹的面试题

    网上看到一道坑爹的面试题，代码如下：（js真是处处是坑呀。。。(┬＿┬)） 输出结果(chrome下)： 作为前端...

  • JavaScript数组赋值引用及理解

    今天看到一道前端js面试题，加深了我对数组的一些理解。 var arr1 = 'edison'.split('')...

  • 前端JavaScript高级面试技巧[1]

    第1章 课程介绍 1-1 导学 课程概述 做什么？— 讲解前端 JS 高级面试题 哪些部分？— 高级基础, 框架原...

  • 前端知识 - 收藏集 - 掘金

    一道 JS 面试题所引发的 "血案"，透过现象寻本质，再从本质看现象 - 前端 - 掘金觉得本人写的不算很烂的话，...

  • 快乐前端--图片预加载

    前言 正所谓金三银四五吃土，因此这些天几个前端技术群讨论最多的话题就是面试题了。某日群内讨论一道面试题：“前端如何...

网友评论

      本文标题：【宠粉通道】叫我讲解的一道前端JS面试题-灵魂三问:protot

      本文链接：https://www.haomeiwen.com/subject/vzahoctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|【宠粉通道】叫我讲解的一道前端JS面试题-灵魂三问:protot|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！