前端常见面试题（十）@郝晨光

new操作符干了什么？

我们可以一起通过代码实现来看看new关键字到底做了一些什么事情

function Book(name) {
    this.name = name;
}
Book.prototype.say = function() {
    console.log(this.name);
};
let book = new Book('javascript高级程序设计');
console.log(book);
book.say();

输出结果如下图：


new操作符实例化构造函数

上例中，new关键字调用的构造函数并没有任何返回值，最终我们实例创建了一个对象，那如果构造函数拥有返回值呢？new关键字会如何处理

function Test(name) {
    this.conname = name;
    return 1
}
Test.prototype.say = function() {
    console.log(this.conname);
};
let test = new Test('测试');
console.log(test);
test.say();
new操作符对于拥有返回值的构造函数

上例中，构造函数返回了一个基本数据类型的值，而最终我们依旧拿到了想要的实例对象。那如果构造函数返回一个引用类型的值呢？

function Test(name) {
    this.conname = name;
    return {
        name
    }
}
Test.prototype.say = function() {
    console.log(this.conname);
};
let test = new Test('测试');
console.log(test);
test.say();

上例中，构造函数最终返回了一个对象，这个对象上有name属性，然后在构造函数的prototype上，还拥有say方法，我们看看这次new得到的值是什么，是否拥有构造函数prototype上的方法


new操作符对于拥有返回值的构造函数

可以看到的是，我们拿到的对象是最终构造函数return出来的那个对象，而这个对象页没有构造函数prototype上的say方法

经过测试，我们发现

  1. new关键字 通过构造函数创建出来的实例可以访问到构造函数中的属性
  2. new关键字 通过构造函数创建出来的实例可以访问到构造函数原型链中的属性，也就是说通过 new 操作符，实例与构造函数通过原型链连接了起来
  3. new关键字 操作的构造函数如果返回基本类型，那么这个返回值毫无意义
  4. new关键字 操作的构造函数如果返回引用类型，那么这个返回值会被正常使用

通过上述的一些测试，我们可以自己试着实现一下new关键字；

自己实现new关键字

function Book(name) {
    this.name = name;
}
Book.prototype.say = function() {
    console.log(this.name);
};
function myNew(Constructor, ...args) {
    let obj = {};
    obj.__proto__ = Constructor.prototype;
    let result = Constructor.call(obj, ...args);
    return result instanceof Object ? result : obj;
}
let book = myNew(Book, 'javascript高级程序设计');
console.log(book);
book.say();
// 本文由郝晨光整理并总结，未经授权禁止转载
自己实现new关键字

总结 new关键字到底做了些什么

  1. 先创建了一个新的空对象
  2. 然后让这个空对象的proto指向函数的原型prototype
  3. 将对象作为函数的this传进去，如果return 出来东西是对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象


null和undefined的区别？

在javascript中，null和undefined都用来表示一个空的值，

null

null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
使用场景：

  1. 作为函数的参数，表示该函数的参数不是对象；
  2. 作为对象原型链的终点。

undefined

undefined类型，代表“未定义”，代表一个变量已经声明但是还未赋值，就是此处应该有一个值，但是还没有定义。
使用场景：

  1. 变量被声明了，但没有赋值时，就等于undefined。
  2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。
  3. 对象没有赋值的属性，该属性的值为undefined。
  4. 函数没有返回值时，默认返回undefined。


eval是做什么的？

eval用来将字符串解析为javascript代码并执行

// 声明变量
const str = "var a = 5,b = 10;"
eval(str);
console.log(a); // 5
console.log(b); // 10
// 返回运算值
const str2 = "5+10";
console.log(eval(str2)); // 15
// 本文由郝晨光整理并总结，未经授权禁止转载

eval还可以将JSON字符串转换为JSON对象，例如：

const JSONStr = '[{name: "张三",age: 25},{name: "李四", age: 30}]';
let JSONObj = eval(JSONStr);
console.log(JSONObj); // [{name: "张三",age: 25},{name: "李四", age: 30}]

需要注意的是：我们应该避免使用eval，它并不安全，而且非常耗性能（需要先将字符串转换为javascript代码，然后再执行）。


iframe的优缺点

什么是iframe？

iframe就是框架网页就是在同一个页面里有多个网页,使用框架的好处就是你在请求一个网页的下一个页面的时候,还有 一个网页是一直显示着的,这样浏览者就不会就的等待的存在了;
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

iframe的使用方法

iframe使用很简单，使用src属性指向另一个你需要包含的另一个文件即可，也可以设置元素的宽，高等。比如：

<iframe 
    name="list-frame"   // 规定 iframe 的名称。
    marginwidth="0"     // 定义 iframe 的左侧和右侧的边距。
    marginheight="0"    // 定义 iframe 的顶部和底部的边距。
    width="100%"        // 定义 iframe 的宽度。
    height="300px"      // 规定 iframe 的高度。
    src="list.html"     // 规定在 iframe 中显示的文档的 URL。
    frameborder="0"     // 规定是否显示框架周围的边框。取值：0/1
    scrolling="auto"    // 规定是否在 iframe 中显示滚动条。取值：yes/no/auto
></iframe>

iframe的优缺点

优点
  1. iframe能够原封不动的把嵌入的网页展现出来。
  2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
  4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点
  1. 页面样式调试麻烦，出现多个滚动条；
  2. 浏览器的后退按钮失效；
  3. 过多会增加服务器的HTTP请求；
  4. 小型的移动设备无法完全显示框架；
  5. 产生多个页面，不易管理；
  6. 不容易打印；
  7. iframe会阻塞主页面的Onload事件
  8. 占用资源。每增加一个 iframe，相当于多增加一个独立的窗口，每个 iframe 中都需要占用独立的资源。
  9. 代码复杂，无法被一些搜索引擎解读。

如果本文对您有帮助，可以看看本人的其他文章:
前端常见面试题（九）@郝晨光
前端常见面试题（八）@郝晨光
前端常见面试题（七）@郝晨光

友情链接：纯原生实现弹出层 @程程程

结言
感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350