javascript和c的区别 知乎_百度知道
javascript和c的区别 知乎
我有更好的答案
javascript是解释型脚本语言，而c是面向过程的、高级的、编译型语言。
采纳率：84%
来自团队：
这两个都没有用过，区别再想下。
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。15,564被浏览616,229分享邀请回答5.2K90 条评论分享收藏感谢收起how2j.cn/k/tmall-front/tmall-front-790/790.html?tid=2
由于个人能力和视野有限，教程还有诸多不足之处，请大家多多指点，谢谢。收藏的同学，请记得点个赞~50683 条评论分享收藏感谢收起JavaScript 是弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程。关注话题分享阅读全文15K594 条评论分享收藏感谢阅读全文10K1,053 条评论分享收藏感谢阅读全文10K406 条评论分享收藏感谢阅读全文6.6K388 条评论分享收藏感谢阅读全文6.3K315 条评论分享收藏感谢92,138428被浏览41,994分享邀请回答718 条评论分享收藏感谢收起// jQuery 进行 Ajax 请求
async: true,
type: 'POST',
url: "api.php/CustomerLogin/login",
username: 'PuYart',
password: 'jianshu',
uuid: 'web_jianshu'
success: function (data) {
// 登录成功
阮一峰（/）如是说：Ajax：库：/UI 框架：/依赖管理：/MVVM：/后端之旅2009年5月，Ryan Dah 发布了
的最初版本。Node 是一个基于 Chrome JavaScript 运行时建立的平台，它对
引擎进行了封装，使 JavaScript 第一次走出前端运行在了服务器上。这对 JavaScript 来说是一种质的突破，这使得 Web 编程可以只用一门语言便可完成。It's Amazing! Web 的大一统时代仿佛就要来了。同时 Node 也诞生了 ，从此 JavaScript 也有了强大的包管理机制。2009年2月，Ryan Dahl 在博客上宣布准备基于 V8 创建一个轻量级的 Web 服务器并提供一套库。2009年5月，Ryan Dahl 在 GitHub 上发布了最初版本的部分 Node.js 包，随后几个月里，有人开始使用 Node.js 开发应用。2009年11月和2010年4月，两届 JSConf 大会都安排了 Node.js 的讲座。2010年年底，Node.js 获得云计算服务商 Joyent 资助，创始人 Ryan Dahl 加入 Joyent 全职负责 Node.js 的发展。2011年7月，Node.js 在微软的支持下发布 Windows 版本// 使用 Express 的 Hello world
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
关于 Node：/Web 开发框架：/博客系统：/基于 Node 的前端自动化构建工具：/Hybrid App传统上 JavaScript 只能在浏览器中运行，Node 的出现让 JavaScript 运行在了服务端，然而脱离浏览器 JavaScript 还是不能跨平台运行。人们总是希望用一种方式去做所有的事情，于是聪明的工程师们就发明了
这种形式，让 JavaScript 在一定意义上运行在了移动设备上。然而当前 Hybrid App 虽然让 JavaScript 也可以写出 JAVA/Objective-C 才能实现的 APP，但是这种方式仍然没有抛弃浏览器运行环境，对 WebView 有很强的依赖性，性能和原生应用还有很大差距。对比：工具：//桌面应用至此 JavaScript 除了可以被浏览器解析，也可以作为后端语言使用，还可以用来构建移动端 APP。仿佛已经够强大了吧，然而这还不够，JavaScript 还可以用来构建桌面应用！Node-webkit 是一个 Web 应用程序运行时环境，它可以让你以 Web 的方式来写桌面应用程序，你可以用任何流行的 Web 技术来编写一个跨平台（Windows，Linux，MacOS）的桌面程序，并且性能和交互也是良好的， 桌面客户端便是使用 Node-webkit 编写的。目前在 上有 24463 Star。heX 是有道公司开发的采用前端技术（HTML，CSS，JavaScript）开发桌面应用软件的跨平台解决方案，意在解决传统桌面应用开发中繁琐的 UI 和交互开发工作，使其变的简单而高效。特别适合重 UI，重交互的桌面应用软件。新版有道词典 beta 版的首页便是使用 heX 开发完成的。//神作 ReactReact（React.js） 是由 FaceBook 开发和维护的前端框架，目前在
得到了 27900+ star。它摒弃了 MVC/MVVM 的模式，仅仅是做 UI，开创性地采用了 Virtual DOM（虚拟 DOM）避免了 DOM 操作消耗性能的问题，将 UI 拆分成不同的可组合、可复用、可维护的组件，组件和组件之间耦合度极低，开发效率大幅度增加。在前端 UI 组件化的趋势下，这很值得去尝试。instagram.com 全站都采用 React 进行开发。 // 简单的官方示例
var HelloMessage = React.createClass({
render: function() {
return &div&Hello {this.props.name}&/div&;
React.render(&HelloMessage name="John" /&, mountNode);
React Native 既拥有 Native 的用户体验，又保留 React 的开发效率。开源不到1周
Star 破万，这简直是逆天的成绩啊！上线之初仅支持 iOS，React 也在9月14号对 Android 提供了支持服务，这几天意味着你可以使用同一套逻辑和架构、同一门语言实现 Web、iOS、Android 的开发。由于各大平台 API 和交互逻辑的不同，React Native 的理念是 “Learn once, write anywhere”，而不是曾经跨平台流行的 “Write once, run anywhere” 。实际上 React Native 和 React 有很大的差别，但是逻辑和架构还是保持一致的。React Native 和 Hybrid 最大的区别是前者摒弃了饱受性能诟病的 WebView，通过 HTML 标签和移动平台的组件进行映射，仿佛是将 JS “编译”成了原生语言一样，性能和交互体验会比 Hybrid 好上不少。目前在
上有 18551 Star。// 简单的官方示例
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {
&TabBarIOS&
&TabBarIOS.Item title="React Native" selected={true}&
&NavigatorIOS initialRoute={{ title: 'React Native' }} /&
&/TabBarIOS.Item& &/TabBarIOS&
// Android
var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid } = React;
var App = React.createClass({
render: function() {
&DrawerLayoutAndroid
renderNavigationView={() =& &Text&React Native&/Text&}&
&ProgressBarAndroid /&
&/DrawerLayoutAndroid&
/游戏世界上最流行的 2D 游戏引擎之一
和最流行的 3D 游戏引擎之一
均支持 JS 开发游戏。Cocos2d-JS 是 Cocos2d-x 的 JavaScript 版本，融合了 Cocos2d-html5 和Cocos2d-x JavaScript Bindings。它支持 Cocos2d-x 的所有核心特性并提供更简单易用的 JavaScript 风格 API，并且天然支持原生、浏览器跨平台应用。在3.0版中，Cocos2d-JS 完成了不同平台工作流的彻底整合，为不同平台提供了统一的开发体验。无论开发 Web 应用还是原生应用，都可以便捷地采用 Cocos2d-JS 实现“一次开发，全平台运行”。采用 Cocos2d-JS 开发的同一套 JavaScript 游戏代码，可以同时运行在 Mac OS X, Windows, iOS, Android等原生平台、以及所有现代浏览器上，这将使得我们的开发者轻松覆盖几乎所有发行渠道，带来前所未有的机遇。另一方面，若开发者只想开发一款 Web 轻度休闲游戏，Cocos2d-JS 也专门为此类游戏定制了 Lite Version，直接将 Cocos2d-JS Lite Version 集成到页面中即可使用。Cocos2d-JS v3.0框架Unity3D 是一个跨平台的 3D 游戏引擎，与 Cocos2d 最大的区别在于前者主要面对 2D 游戏开发者，后者主要进行大型 3D 游戏的开发。686 条评论分享收藏感谢收起20个必会的JavaScript面试题a year ago问题2:下面的代码输出什么？var y = 1;
if (function f(){}) {
console.log(y);
正确的答案应该是 1undefined。JavaScript中if语句求值其实使用eval函数，eval(function f(){}) 返回 function f(){} 也就是 true。下面我们可以把代码改造下，变成其等效代码。var k = 1;
eval(function foo(){});
console.log(k);
上面的代码输出其实就是 1undefined。为什么那？我们查看下 eval() 说明文档即可获得答案该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。恰恰 function f(){} 语句的返回值是 undefined，所以一切都说通了。注意上面代码和以下代码不同。var k = 1;
function foo(){};
console.log(k); // output 1function
问题3:在JavaScript中创建一个真正的private方法有什么缺点？每一个对象都会创建一个private方法的方法，这样很耗费内存观察下面代码var Employee = function (name, company, salary) {
this.name = name || "";
this.company = company || "";
this.salary = salary || 5000;
// Private method
var increaseSalary = function () {
this.salary = this.salary + 1000;
// Public method
this.dispalyIncreasedSalary = function() {
increaseSlary();
console.log(this.salary);
// Create Employee class object
var emp1 = new Employee("John","Pluto",3000);
// Create Employee class object
var emp2 = new Employee("Merry","Pluto",2000);
// Create Employee class object
var emp3 = new Employee("Ren","Pluto",2500);
在这里 emp1,emp2,emp3都有一个increaseSalary私有方法的副本。所以我们除非必要，非常不推荐使用私有方法。问题4:JavaScript中什么是闭包？写出一个例子老生常谈的问题了，闭包是在一个函数里声明了另外一个函数，并且这个函数访问了父函数作用域里的变量。下面给出一个闭包例子，它访问了三个域的变量它自己作用域的变量父函数作用域的变量全局作用域的变量var globalVar = "abc";
// Parent self invoking function
(function outerFunction (outerArg) { // begin of scope outerFunction
// Variable declared in outerFunction function scope
var outerFuncVar = 'x';
// Closure self-invoking function
(function innerFunction (innerArg) { // begin of scope innerFunction
// variable declared in innerFunction function scope
var innerFuncVar = "y";
console.log(
"outerArg = " + outerArg + "\n" +
"outerFuncVar = " + outerFuncVar + "\n" +
"innerArg = " + innerArg + "\n" +
"innerFuncVar = " + innerFuncVar + "\n" +
"globalVar = " + globalVar);
}// end of scope innerFunction)(5); // Pass 5 as parameter
}// end of scope outerFunction )(7); // Pass 7 as parameter
innerFunction is closure that is defined inside outerFunc
输出很简单：outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc
问题5:写一个mul函数，使用方法如下。console.log(mul(2)(3)(4)); // output : 24
console.log(mul(4)(3)(4)); // output : 48
答案直接给出：function mul (x) {
return function (y) { // anonymous function
return function (z) { // anonymous function
return x * y *
简单说明下： mul 返回一个匿名函数，运行这个匿名函数又返回一个匿名函数，最里面的匿名函数可以访问 x,y,z 进而算出乘积返回即可。对于JavaScript中的函数一般可以考察如下知识点：函数是一等公民函数可以有属性，并且能连接到它的构造方法函数可以像一个变量一样存在内存中函数可以当做参数传给其他函数函数可以返回其他函数问题6:JavaScript怎么清空数组？如var arrayList =
['a','b','c','d','e','f'];
怎么清空 arrayList方法1arrayList = [];
直接改变arrayList所指向的对象，原对象并不改变。方法2arrayList.length = 0;
这种方法通过设置length=0 使原数组清除元素。方法3arrayList.splice(0, arrayList.length);
和方法2相似问题7:怎么判断一个object是否是数组(array)？方法1使用 Object.prototype.toString 来判断是否是数组function isArray(obj){
return Object.prototype.toString.call( obj ) === '[object Array]';
这里使用call来使 toString 中 this 指向 obj。进而完成判断方法二使用 原型链 来完成判断function isArray(obj){
return obj.__proto__ === Array.
基本思想是利用 实例如果是某个构造函数构造出来的那么 它的 __proto__是指向构造函数的 prototype属性。方法3利用JQueryfunction isArray(obj){
return $.isArray(obj)
JQuery isArray 的实现其实就是方法1问题8:下面代码输出什么？var output = (function(x){
console.log(output);
输出是 0。 delete 操作符是将object的属性删去的操作。但是这里的 x 是并不是对象的属性， delete 操作符并不能作用。问题9:下面代码输出什么？var x = 1;
var output = (function(){
console.log(output);
输出是 1。delete 操作符是将object的属性删去的操作。但是这里的 x 是并不是对象的属性， delete 操作符并不能作用。问题10:下面代码输出什么？var x = { foo : 1};
var output = (function(){
console.log(output);
输出是 undefined。x虽然是全局变量，但是它是一个object。delete作用在x.foo上，成功的将x.foo删去。所以返回undefined问题11:下面代码输出什么？var Employee = {
company: 'xyz'
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);
输出是 xyz，这里的 emp1 通过 prototype 继承了 Employee的 company。emp1自己并没有company属性。所以delete操作符的作用是无效的。问题12:什么是 undefined x 1 ？在chrome下执行如下代码，我们就可以看到undefined x 1的身影。var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
console.log(trees);
当我们使用 delete 操作符删除一个数组中的元素，这个元素的位置就会变成一个占位符。打印出来就是undefined x 1。 注意如果我们使用trees[3] === 'undefined × 1'返回的是 false。因为它仅仅是一种打印表示，并不是值变为undefined x 1。问题13:下面代码输出什么？var trees = ["xyz","xxxx","test","ryan","apple"];
delete trees[3];
console.log(trees.length);
输出是5。因为delete操作符并不是影响数组的长度。问题14:下面代码输出什么？var bar =
console.log(bar + 0);
console.log(bar + "xyz");
console.log(bar + true);
console.log(bar + false);
下面给出一个加法操作表Number + Number -& 加法Boolean + Number -& 加法Boolean + Boolean -& 加法Number + String -& 连接String + Boolean -& 连接String + String -& 连接问题15:下面代码输出什么？var z = 1, y = z =
console.log(y);
输出是 undefined。js中赋值操作结合律是右至左的 ，即从最右边开始计算值赋值给左边的变量。上面代码等价于var z = 1
console.log(y);
问题16:下面代码输出什么？var foo = function bar(){ return 12; };
typeof bar();
输出是抛出异常，bar is not defined。 如果想让代码正常运行，需要这样修改代码：var bar = function(){ return 12; };
typeof bar();
或者是function bar(){ return 12; };
typeof bar();
明确说明这个下问题var foo = function bar(){
// foo is visible here
// bar is visible here
console.log(typeof bar()); // Work here :)
// foo is visible here
// bar is undefined here
问题17:两种函数声明有什么区别？var foo = function(){
// Some code
function bar(){
// Some code
foo的定义是在运行时。想系统说明这个问题，我们要引入变量提升的这一概念。我们可以运行下如下代码看看结果。console.log(foo)
console.log(bar)
var foo = function(){
// Some code
function bar(){
// Some code
输出为undefined
function bar(){
// Some code
为什么那？为什么 foo 打印出来是 undefined，而 bar打印出来却是函数？JavaScript在执行时，会将变量提升。所以上面代码JavaScript 引擎在实际执行时按这个顺序执行。// foo bar的定义位置被提升
function bar(){
// Some code
console.log(foo)
console.log(bar)
foo = function(){
// Some code
原代码的输出合理解释了。问题18:下面代码输出什么？var salary = "1000$";
(function () {
console.log("Original salary was " + salary);
var salary = "5000$";
console.log("My New Salary " + salary);
输出是Original salary was undefined
My New Salary 5000$
这题同样考察的是变量提升。等价于以下代码var salary = "1000$";
(function () {
console.log("Original salary was " + salary);
salary = "5000$";
console.log("My New Salary " + salary);
问题19:什么是 instanceof 操作符？下面代码输出什么？function foo(){
console.log(new foo() instanceof foo);
instanceof操作符用来判断是否当前对象是特定类的对象。如function Animal(){
//或者不写return语句
var dog = new Animal();
dog instanceof Animal // Output : true
但是，这里的foo定义为function foo(){
所以// here bar is pointer to function foo(){return foo}.
var bar = new foo();
所以 new foo() instanceof foo 返回 false问题20: 如果我们使用JavaScript的"关联数组"，我们怎么计算"关联数组"的长度？var counterArray = {
counterArray["C"] = 1;
其实答案很简单，直接计算key的数量就可以了。Object.keys(counterArray).length // Output 3
本文给出的面试题答案只是很多合理答案中的几个，可能会不全面，欢迎大家补充。由于个人疏忽等原因，本文中难免会存在少量错误，欢迎大家批评指正。面试题参考自: 185收藏分享举报文章被以下专栏收录码上开始学IT~码蜂社垂直大前端专栏，从此不怕敲代码{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&码蜂社前端专栏，大前端知识和资源、算法等计算机基础知识。欢迎来稿~（开小灶来这里：）&,&permission&:&COLUMN_PUBLIC&,&memberId&:7772004,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&码上开始学IT~码蜂社垂直大前端专栏，从此不怕敲代码&,&urlToken&:&fe-guide&,&id&:29419,&imagePath&:&v2-1de91cd0d38b8.png&,&slug&:&fe-guide&,&applyReason&:&0&,&name&:&前端指南&,&title&:&前端指南&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Ffe-guide&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:2089,&avatar&:{&id&:&v2-1de91cd0d38b8&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-1de91cd0d38b8_l.jpg&,&articlesCount&:47},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-0db567cb589e9cea86abea_r.jpg&,&lastUpdated&:,&imagePath&:&v2-0db567cb589e9cea86abea.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,769,13512],&summary&:&问题1:JavaScript 中 undefined 和 not defined 的区别JavaScript 未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。 但是，使用typeof undeclared_variable并不会产生异常，会直接返回 undefined。 \u002F\u002F …&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T22:01:55+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2390211,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&20个必会的JavaScript面试题&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:29419,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-0db567cb589e9cea86abea_r.jpg&,&author&:{&bio&:&码蜂社(mafengshe.com)导师 前端学习群 &,&isFollowing&:false,&hash&:&488b940fa77e95b71a145fcb955d42df&,&uid&:671400,&isOrg&:false,&slug&:&markmfs&,&isFollowed&:false,&description&:&&,&name&:&Mark&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmarkmfs&,&avatar&:{&id&:&v2-65ec11cb7d4ea2513218f&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:564332}],&title&:&20个必会的JavaScript面试题&,&author&:&markmfs&,&content&:&\u003Ch2\u003E问题1:JavaScript 中 undefined 和 not defined 的区别\u003C\u002Fh2\u003E\u003Cp\u003EJavaScript 未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。 但是，使用typeof undeclared_variable并不会产生异常，会直接返回 undefined。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E \u002F\u002F 声明 x\nconsole.log(x); \u002F\u002Foutput: undefined \n\nconsole.log(typeof y); \u002F\u002Foutput: undefined \n\nconsole.log(z);
\u002F\u002F 抛出异常: ReferenceError: z is not defined\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题2:下面的代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar y = 1;\nif (function f(){}) {\n
y +=\n}\nconsole.log(y);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E正确的答案应该是 1undefined。\u003C\u002Fp\u003E\u003Cp\u003EJavaScript中if语句求值其实使用eval函数，eval(function f(){}) 返回 function f(){} 也就是 true。\u003C\u002Fp\u003E\u003Cp\u003E下面我们可以把代码改造下，变成其等效代码。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar k = 1;\nif (1) {\n
eval(function foo(){});\n
k +=\n}\nconsole.log(k); \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E上面的代码输出其实就是 1undefined。为什么那？我们查看下 eval() 说明文档即可获得答案\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E恰恰 function f(){} 语句的返回值是 undefined，所以一切都说通了。\u003C\u002Fp\u003E\u003Cp\u003E注意上面代码和以下代码不同。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar k = 1;\nif (1) {\n
function foo(){};\n
k +=\n}\nconsole.log(k); \u002F\u002F output 1function\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题3:在JavaScript中创建一个真正的private方法有什么缺点？\u003C\u002Fh2\u003E\u003Cp\u003E每一个对象都会创建一个private方法的方法，这样很耗费内存\u003C\u002Fp\u003E\u003Cp\u003E观察下面代码\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar Employee = function (name, company, salary) {\n
this.name = name || \&\&;
this.company = company || \&\&; \n
this.salary = salary || 5000; \n\n
\u002F\u002F Private method\n
var increaseSalary = function () {\n
this.salary = this.salary + 1000;\n
\u002F\u002F Public method\n
this.dispalyIncreasedSalary = function() {\n
increaseSlary();\n
console.log(this.salary);\n
};\n};\n\n\u002F\u002F Create Employee class object\nvar emp1 = new Employee(\&John\&,\&Pluto\&,3000);\n\u002F\u002F Create Employee class object\nvar emp2 = new Employee(\&Merry\&,\&Pluto\&,2000);\n\u002F\u002F Create Employee class object\nvar emp3 = new Employee(\&Ren\&,\&Pluto\&,2500);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在这里 emp1,emp2,emp3都有一个increaseSalary私有方法的副本。\u003C\u002Fp\u003E\u003Cp\u003E所以我们除非必要，非常不推荐使用私有方法。\u003C\u002Fp\u003E\u003Ch2\u003E问题4:JavaScript中什么是闭包？写出一个例子\u003C\u002Fh2\u003E\u003Cp\u003E老生常谈的问题了，闭包是在一个函数里声明了另外一个函数，并且这个函数访问了父函数作用域里的变量。\u003C\u002Fp\u003E\u003Cp\u003E下面给出一个闭包例子，它访问了三个域的变量\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E它自己作用域的变量\u003C\u002Fli\u003E\u003Cli\u003E父函数作用域的变量\u003C\u002Fli\u003E\u003Cli\u003E全局作用域的变量\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar globalVar = \&abc\&; \n\n\u002F\u002F Parent self invoking function \n(function outerFunction (outerArg) { \u002F\u002F begin of scope outerFunction\n
\u002F\u002F Variable declared in outerFunction function scope \n
var outerFuncVar = 'x';
\u002F\u002F Closure self-invoking function \n
(function innerFunction (innerArg) { \u002F\u002F begin of scope innerFunction\n
\u002F\u002F variable declared in innerFunction function scope\n
var innerFuncVar = \&y\&; \n
console.log(
\&outerArg = \& + outerArg + \&\\n\& +\n
\&outerFuncVar = \& + outerFuncVar + \&\\n\& +\n
\&innerArg = \& + innerArg + \&\\n\& +\n
\&innerFuncVar = \& + innerFuncVar + \&\\n\& +\n
\&globalVar = \& + globalVar);\n \n
}\u002F\u002F end of scope innerFunction)(5); \u002F\u002F Pass 5 as parameter \n}\u002F\u002F end of scope outerFunction )(7); \u002F\u002F Pass 7 as parameter \ninnerFunction is closure that is defined inside outerFunc\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出很简单：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EouterArg = 7\nouterFuncVar = x\ninnerArg = 5\ninnerFuncVar = y\nglobalVar = abc\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题5:写一个mul函数，使用方法如下。\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Econsole.log(mul(2)(3)(4)); \u002F\u002F output : 24 \nconsole.log(mul(4)(3)(4)); \u002F\u002F output : 48\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E答案直接给出：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction mul (x) {\n
return function (y) { \u002F\u002F anonymous function \n
return function (z) { \u002F\u002F anonymous function \n
return x * y * \n
};\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E简单说明下： mul 返回一个匿名函数，运行这个匿名函数又返回一个匿名函数，最里面的匿名函数可以访问 x,y,z 进而算出乘积返回即可。\u003C\u002Fp\u003E\u003Cp\u003E对于JavaScript中的函数一般可以考察如下知识点：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E函数是一等公民\u003C\u002Fli\u003E\u003Cli\u003E函数可以有属性，并且能连接到它的构造方法\u003C\u002Fli\u003E\u003Cli\u003E函数可以像一个变量一样存在内存中\u003C\u002Fli\u003E\u003Cli\u003E函数可以当做参数传给其他函数\u003C\u002Fli\u003E\u003Cli\u003E函数可以返回其他函数\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E问题6:JavaScript怎么清空数组？\u003C\u002Fh2\u003E\u003Cp\u003E如\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar arrayList =
['a','b','c','d','e','f'];\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E怎么清空 arrayList\u003C\u002Fp\u003E\u003Ch3\u003E方法1\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EarrayList = [];\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E直接改变arrayList所指向的对象，原对象并不改变。\u003C\u002Fp\u003E\u003Ch3\u003E方法2\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EarrayList.length = 0;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这种方法通过设置length=0 使原数组清除元素。\u003C\u002Fp\u003E\u003Ch3\u003E方法3\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EarrayList.splice(0, arrayList.length);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E和方法2相似\u003C\u002Fp\u003E\u003Ch2\u003E问题7:怎么判断一个object是否是数组(array)？\u003C\u002Fh2\u003E\u003Ch3\u003E方法1\u003C\u002Fh3\u003E\u003Cp\u003E使用 Object.prototype.toString 来判断是否是数组\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction isArray(obj){\n
return Object.prototype.toString.call( obj ) === '[object Array]';\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这里使用call来使 toString 中 this 指向 obj。进而完成判断\u003C\u002Fp\u003E\u003Ch3\u003E方法二\u003C\u002Fh3\u003E\u003Cp\u003E使用 原型链 来完成判断\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction isArray(obj){\n
return obj.__proto__ === Array.\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E基本思想是利用 实例如果是某个构造函数构造出来的那么 它的 __proto__是指向构造函数的 prototype属性。\u003C\u002Fp\u003E\u003Ch3\u003E方法3\u003C\u002Fh3\u003E\u003Cp\u003E利用JQuery\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction isArray(obj){\n
return $.isArray(obj)\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EJQuery isArray 的实现其实就是方法1\u003C\u002Fp\u003E\u003Ch2\u003E问题8:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar output = (function(x){\\\n})(0);\n
\nconsole.log(output);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是 0。 delete 操作符是将object的属性删去的操作。但是这里的 x 是并不是对象的属性， delete 操作符并不能作用。\u003C\u002Fp\u003E\u003Ch2\u003E问题9:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar x = 1;\nvar output = (function(){\\\n})();\n\nconsole.log(output);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是 1。delete 操作符是将object的属性删去的操作。但是这里的 x 是并不是对象的属性， delete 操作符并不能作用。\u003C\u002Fp\u003E\u003Ch2\u003E问题10:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar x = { foo : 1};\nvar output = (function(){\n
delete x.\n
return x.\n})();\n\nconsole.log(output);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是 undefined。x虽然是全局变量，但是它是一个object。delete作用在x.foo上，成功的将x.foo删去。所以返回undefined\u003C\u002Fp\u003E\u003Ch2\u003E问题11:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar Employee = {\n
company: 'xyz'\n}\nvar emp1 = Object.create(Employee);\ndelete emp1.company\nconsole.log(emp1.company);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是 xyz，这里的 emp1 通过 prototype 继承了 Employee的 company。emp1自己并没有company属性。所以delete操作符的作用是无效的。\u003C\u002Fp\u003E\u003Ch2\u003E问题12:什么是 undefined x 1 ？\u003C\u002Fh2\u003E\u003Cp\u003E在chrome下执行如下代码，我们就可以看到undefined x 1的身影。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar trees = [\&redwood\&,\&bay\&,\&cedar\&,\&oak\&,\&maple\&];\ndelete trees[3];\nconsole.log(trees);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E当我们使用 delete 操作符删除一个数组中的元素，这个元素的位置就会变成一个占位符。打印出来就是undefined x 1。 注意如果我们使用trees[3] === 'undefined × 1'返回的是 false。因为它仅仅是一种打印表示，并不是值变为undefined x 1。\u003C\u002Fp\u003E\u003Ch2\u003E问题13:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar trees = [\&xyz\&,\&xxxx\&,\&test\&,\&ryan\&,\&apple\&];\ndelete trees[3];\n
\nconsole.log(trees.length);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是5。因为delete操作符并不是影响数组的长度。\u003C\u002Fp\u003E\u003Ch2\u003E问题14:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar bar =\nconsole.log(bar + 0);
\nconsole.log(bar + \&xyz\&);
\nconsole.log(bar + true);
\nconsole.log(bar + false);
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E1\ntruexyz\n2\n1\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E下面给出一个加法操作表\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ENumber + Number -& 加法\u003C\u002Fli\u003E\u003Cli\u003EBoolean + Number -& 加法\u003C\u002Fli\u003E\u003Cli\u003EBoolean + Boolean -& 加法\u003C\u002Fli\u003E\u003Cli\u003ENumber + String -& 连接\u003C\u002Fli\u003E\u003Cli\u003EString + Boolean -& 连接\u003C\u002Fli\u003E\u003Cli\u003EString + String -& 连接\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E问题15:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar z = 1, y = z =\nconsole.log(y);
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是 undefined。js中赋值操作结合律是右至左的 ，即从最右边开始计算值赋值给左边的变量。\u003C\u002Fp\u003E\u003Cp\u003E上面代码等价于\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar z = 1\nz =\nvar y =\nconsole.log(y);
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题16:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar foo = function bar(){ return 12; };\ntypeof bar();
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是抛出异常，bar is not defined。 如果想让代码正常运行，需要这样修改代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar bar = function(){ return 12; };\ntypeof bar();
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E或者是\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction bar(){ return 12; };\ntypeof bar();
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E明确说明这个下问题\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar foo = function bar(){ \n
\u002F\u002F foo is visible here \n
\u002F\u002F bar is visible here\n
console.log(typeof bar()); \u002F\u002F Work here :)\n};\n\u002F\u002F foo is visible here\n\u002F\u002F bar is undefined here\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题17:两种函数声明有什么区别？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar foo = function(){ \n
\u002F\u002F Some code\n}; \nfunction bar(){ \n
\u002F\u002F Some code\n}; \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Efoo的定义是在运行时。想系统说明这个问题，我们要引入变量提升的这一概念。\u003C\u002Fp\u003E\u003Cp\u003E我们可以运行下如下代码看看结果。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Econsole.log(foo)\nconsole.log(bar)\n\nvar foo = function(){ \n
\u002F\u002F Some code\n}; \nfunction bar(){ \n
\u002F\u002F Some code\n}; \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出为\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Eundefined\nfunction bar(){ \n
\u002F\u002F Some code\n}; \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E为什么那？为什么 foo 打印出来是 undefined，而 bar打印出来却是函数？\u003C\u002Fp\u003E\u003Cp\u003EJavaScript在执行时，会将变量提升。\u003C\u002Fp\u003E\u003Cp\u003E所以上面代码JavaScript 引擎在实际执行时按这个顺序执行。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F foo bar的定义位置被提升\nfunction bar(){ \n
\u002F\u002F Some code\n}; \\n\nconsole.log(foo)\nconsole.log(bar)\n\nfoo = function(){ \n
\u002F\u002F Some code\n}; \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E原代码的输出合理解释了。\u003C\u002Fp\u003E\u003Ch2\u003E问题18:下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar salary = \&1000$\&;\n\n(function () {\n
console.log(\&Original salary was \& + salary);\n\n
var salary = \&5000$\&;\n\n
console.log(\&My New Salary \& + salary);\n})();\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E输出是\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EOriginal salary was undefined\nMy New Salary 5000$\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这题同样考察的是变量提升。等价于以下代码\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar salary = \&1000$\&;\n\n (function () {\\n
console.log(\&Original salary was \& + salary);\n\n
salary = \&5000$\&;\n\n
console.log(\&My New Salary \& + salary);\n })();\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E问题19:什么是 instanceof 操作符？下面代码输出什么？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction foo(){ \ \n}\n\nconsole.log(new foo() instanceof foo);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Einstanceof操作符用来判断是否当前对象是特定类的对象。\u003C\u002Fp\u003E\u003Cp\u003E如\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction Animal(){\n
\u002F\u002F或者不写return语句\\n}\nvar dog = new Animal();\ndog instanceof Animal \u002F\u002F Output : true\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E但是，这里的foo定义为\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Efunction foo(){ \ \n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E所以\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F here bar is pointer to function foo(){return foo}.\nvar bar = new foo();\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E所以 new foo() instanceof foo 返回 false\u003C\u002Fp\u003E\u003Ch2\u003E问题20: 如果我们使用JavaScript的\&关联数组\&，我们怎么计算\&关联数组\&的长度？\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar counterArray = {\n
B : 4\n};\ncounterArray[\&C\&] = 1;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E其实答案很简单，直接计算key的数量就可以了。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EObject.keys(counterArray).length \u002F\u002F Output 3\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cbr\u003E本文给出的面试题答案只是很多合理答案中的几个，可能会不全面，欢迎大家补充。\u003C\u002Fp\u003E\u003Cp\u003E由于个人疏忽等原因，本文中难免会存在少量错误，欢迎大家批评指正。\u003Cbr\u003E\u003Cbr\u003E面试题参考自: \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fwww.codementor.io\u002Fnihantanu\u002F21-essential-javascript-tech-interview-practice-questions-answers-du107p62z\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E21 Essential JavaScript Interview Questions | Codementor\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T14:01:55.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:46,&collapsedCount&:0,&likeCount&:185,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-0db567cb589e9cea86abea_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&}],&adminClosedComment&:false,&titleImageSize&:{&width&:960,&height&:639},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&fe-guide&,&name&:&前端指南&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:46,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T22:01:55+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&程序媛一枚&,&isFollowing&:false,&hash&:&5d43fb6a2da0af363943&,&uid&:64,&isOrg&:false,&slug&:&coffe-lei&,&isFollowed&:false,&description&:&&,&name&:&Candice Lei&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fcoffe-lei&,&avatar&:{&id&:&8b15aa03aa7f4e&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&前端攻城狮&,&isFollowing&:false,&hash&:&cbba9c4d97c33cf49c1fddef&,&uid&:721700,&isOrg&:false,&slug&:&david-liu-02-12&,&isFollowed&:false,&description&:&&,&name&:&David.Liu&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fdavid-liu-02-12&,&avatar&:{&id&:&dfa4b7ceffe8d6&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学习&,&isFollowing&:false,&hash&:&ed3c1db272fdbbc28110a0c&,&uid&:12,&isOrg&:false,&slug&:&zhu-ju-hao&,&isFollowed&:false,&description&:&&,&name&:&朱聚豪&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fzhu-ju-hao&,&avatar&:{&id&:&4ffdfa2fbdecdeb65f456d&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&90后成为中国社会中流砥柱.....&,&isFollowing&:false,&hash&:&ab73e22f8b419d77aa21&,&uid&:685500,&isOrg&:false,&slug&:&zhuo-gang-24&,&isFollowed&:false,&description&:&适者生存。优胜劣汰。&,&name&:&进步&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fzhuo-gang-24&,&avatar&:{&id&:&582eccb18d7a9&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&嵌入式教师、码峰社QQ群&,&isFollowing&:false,&hash&:&b4df5d2eca28aa4efd88e&,&uid&:587100,&isOrg&:false,&slug&:&liu-ji-64-11&,&isFollowed&:false,&description&:&&,&name&:&罗宾老师&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fliu-ji-64-11&,&avatar&:{&id&:&v2-3699cec924cdc704d8d11&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&问题1:JavaScript 中 undefined 和 not defined 的区别JavaScript 未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。 但是，使用typeof undeclared_variable并不会产生异常，会直接返回 undefined。 \u002F\u002F …&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fv2-3cd14ab9b9a40aa099ddc5_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&CSS&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&&,&isFollowing&:false,&hash&:&5f3b63b8be333ace66ea&,&uid&:16,&isOrg&:false,&slug&:&shelley-lee-94&,&isFollowed&:false,&description&:&数据挖掘\u002FWeb前端\u002F在读博士&,&name&:&Shelley Lee&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fshelley-lee-94&,&avatar&:{&id&:&v2-4f235e28daf32c58248cbf&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&fe-guide&,&name&:&前端指南&},&content&:&\u003Cp\u003E布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。\u003C\u002Fp\u003E\u003Ch3\u003E目录\u003C\u002Fh3\u003E\u003Col\u003E\u003Cli\u003E常用居中方法\u003Cul\u003E\u003Cli\u003E水平居中\u003C\u002Fli\u003E\u003Cli\u003E垂直居中\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003Cli\u003E单列布局\u003C\u002Fli\u003E\u003Cli\u003E二列&三列布局\u003Cul\u003E\u003Cli\u003Efloat+margin\u003C\u002Fli\u003E\u003Cli\u003Eposition+margin\u003C\u002Fli\u003E\u003Cli\u003E圣杯布局（float+负margin）\u003C\u002Fli\u003E\u003Cli\u003E双飞翼布局（float+负margin）\u003C\u002Fli\u003E\u003Cli\u003Eflex布局\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003Cli\u003E总结\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Ch3\u003E1.常用居中方法\u003C\u002Fh3\u003E\u003Cp\u003E居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div class=\&parent\&&\n
&div class=\&child\&&&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E水平居中\u003C\u002Fh4\u003E\u003Cp\u003E子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。\u003C\u002Fp\u003E\u003Cp\u003E子元素为\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E行内元素\u003C\u002Fstrong\u003E：对父元素设置text-align:\u003Cbr\u003E\u003Cstrong\u003E定宽块状元素\u003C\u002Fstrong\u003E: 设置左右margin值为\u003Cbr\u003E\u003Cstrong\u003E不定宽块状元素\u003C\u002Fstrong\u003E:
设置子元素为display:inline,然后在父元素上设置text-align:\u003Cbr\u003E\u003Cstrong\u003E通用方案\u003C\u002Fstrong\u003E: flex布局，对父元素设置display:justify-content:\u003C\u002Fp\u003E\u003Ch4\u003E垂直居中\u003C\u002Fh4\u003E\u003Cp\u003E垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E父元素一定，子元素为单行内联文本\u003C\u002Fstrong\u003E：设置父元素的height等于行高line-height\u003Cbr\u003E\u003Cstrong\u003E父元素一定，子元素为多行内联文本\u003C\u002Fstrong\u003E：设置父元素的display:table-cell或inline-block，再设置vertical-align:\u003Cbr\u003E\u003Cstrong\u003E块状元素\u003C\u002Fstrong\u003E:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cstrong\u003E通用方案\u003C\u002Fstrong\u003E: flex布局，给父元素设置{display: align-items:}。\u003C\u002Fp\u003E\u003Ch3\u003E2.单列布局\u003C\u002Fh3\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-12cd0eddcf6e41e5a1fc4b_b.jpg\& data-rawwidth=\&948\& data-rawheight=\&488\& class=\&origin_image zh-lightbox-thumb\& width=\&948\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-12cd0eddcf6e41e5a1fc4b_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003E特征：\u003Cb\u003E定宽、水平居中\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E常见的单列布局有两种：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。\u003C\u002Fli\u003E\u003Cli\u003E一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div class=\&layout\&&\n
&div id=\&header\&&头部&\u002Fdiv&\n
&div id=\&content\&&内容&\u002Fdiv&\n
&div id=\&footer\&&尾部&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
.layout{\n
width: 960 *\u002F\u002F*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*\u002F\n
max-width: 960\n
margin: 0\n
}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E对于第二种，header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置width 或 max-width，并通过margin:auto实现居中。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div id=\&header\&&\n
&div class=\&layout\&&头部&\u002Fdiv&\n&\u002Fdiv&\n&div id=\&content\& class=\&layout\&&内容&\u002Fdiv&\n&div id=\&footer\&&\n
&div class=\&layout\&&尾部&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
.layout{\n
width: 960 *\u002F\u002F*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*\u002F\n
max-width: 960\n
margin: 0\n
}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E3. 二列&三列布局\u003C\u002Fh3\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ea5fc449b06de53c4651_b.jpg\& data-rawwidth=\&1388\& data-rawheight=\&753\& class=\&origin_image zh-lightbox-thumb\& width=\&1388\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ea5fc449b06de53c4651_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003E二列布局的特征是侧栏固定宽度，主栏自适应宽度。\u003Cbr\u003E三列布局的特征是两侧两列固定宽度，中间列自适应宽度。\u003C\u002Fp\u003E\u003Cp\u003E之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。\u003C\u002Fp\u003E\u003Ch4\u003Ea. float+margin\u003C\u002Fh4\u003E\u003Cp\u003E\u003Cstrong\u003E原理说明\u003C\u002Fstrong\u003E：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div id=\&content\&&\n
&div class=\&sub\&&sub&\u002Fdiv&\n
&div class=\&extra\&&extra&\u002Fdiv&\n
&div class=\&main\&&main&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E布局步骤\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。\u003C\u002Fli\u003E\u003Cli\u003E对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.sub{\n
width: 100\n
float:\n}\n.extra{\n
width: 200\n
float:\n}\n.main{\n
margin-left: 100 \n
margin-right: 200\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E一些说明\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。\n　\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cstrong\u003E二列的实现方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。\u003C\u002Fp\u003E\u003Ch4\u003Eb. position+margin\u003C\u002Fh4\u003E\u003Cp\u003E\u003Cstrong\u003E原理说明\u003C\u002Fstrong\u003E：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div class=\&sub\&&left&\u002Fdiv&\n&div class=\&main\&&main&\u002Fdiv&\n&div class=\&extra\&&right&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E布局步骤\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E对两边侧栏分别设置宽度，设置定位方式为绝对定位。\u003C\u002Fli\u003E\u003Cli\u003E设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。\u003C\u002Fli\u003E\u003Cli\u003E对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.sub, .extra {\n
position:\n
top: 0; \n
width: 200\n}\n.sub { \n
left: 0;\n}\n.extra { \n
right: 0; \n}\n.main { \n
margin: 0 200\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E一些说明\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。\u003C\u002Fli\u003E\u003Cli\u003E与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。\u003C\u002Fli\u003E\u003Cli\u003E如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cstrong\u003E二列的实现方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。\u003C\u002Fp\u003E\u003Ch4\u003Ec. 圣杯布局(float + 负margin)\u003C\u002Fh4\u003E\u003Cp\u003E\u003Cstrong\u003E原理说明\u003C\u002Fstrong\u003E：\u003C\u002Fp\u003E\u003Cp\u003E主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E &div id=\&bd\&&
&div class=\&main\&&&\u002Fdiv&
&div class=\&sub\&&&\u002Fdiv&
&div class=\&extra\&&&\u002Fdiv&
\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E布局步骤\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E三者都设置向左浮动。\u003C\u002Fli\u003E\u003Cli\u003E设置main宽度为100%，设置两侧栏的宽度。\u003C\u002Fli\u003E\u003Cli\u003E设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。\u003C\u002Fli\u003E\u003Cli\u003E设置main的padding值给左右两个子面板留出空间。\u003C\u002Fli\u003E\u003Cli\u003E设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.main {
width: 100%;
width: 190
margin-left: -100%;
left: -190
\n.extra {
width: 230
margin-left: -230 \n
position: \n
right: -230
\n }\n#bd {
padding: 0 230px 0 190
\n }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E一些说明\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EDOM元素的书写顺序不得更改。\u003C\u002Fli\u003E\u003Cli\u003E主面板部分优先渲染（一般主面板会比侧栏内容重要）。\u003C\u002Fli\u003E\u003Cli\u003E当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cstrong\u003E二列的实现方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。\u003C\u002Fp\u003E\u003Ch4\u003Ed. 双飞翼布局(float + 负margin )\u003C\u002Fh4\u003E\u003Cp\u003E\u003Cstrong\u003E原理说明\u003C\u002Fstrong\u003E：\u003C\u002Fp\u003E\u003Cp\u003E双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div class=\&main-wrap\&&\n
&div class=\&main\&&#main&\u002Fdiv&\n&\u002Fdiv&\n&div class=\&sub\&&&\u002Fdiv&
\n&div class=\&extra\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E布局步骤\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E三者都设置向左浮动。\u003C\u002Fli\u003E\u003Cli\u003E设置main-wrap宽度为100%，设置两个侧栏的宽度。\u003C\u002Fli\u003E\u003Cli\u003E设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。\u003C\u002Fli\u003E\u003Cli\u003E设置main的margin值给左右两个子面板留出空间。\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.main-wrap {
width: 100%;
width: 190
margin-left: -100%;
\n.extra {
width: 230
margin-left: -230 \n }\n.main {
margin: 0 230px 0 190\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E一些说明\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E主面板部分优先渲染（一般主面板会比侧栏内容重要）。\u003C\u002Fli\u003E\u003Cli\u003E圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。\u003C\u002Fli\u003E\u003Cli\u003E双飞翼布局不用设置相对布局，以及对应的left和right值。\u003C\u002Fli\u003E\u003Cli\u003E通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: left: 190,可以实现sub+extra+main的布局。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cstrong\u003E二列的实现方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。\u003C\u002Fp\u003E\u003Ch4\u003Ee. flex布局\u003C\u002Fh4\u003E\u003Cp\u003E如果你还没有学习flex布局，阮一峰老师的两篇博文将会很适合你。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.ruanyifeng.com\u002Fblog\u002F\u002Fflex-grammar.html%3Futm_source%3Dtuicool\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EFlex 布局教程：语法篇 - 阮一峰的网络日志\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.ruanyifeng.com\u002Fblog\u002F\u002Fflex-examples.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EFlex 布局教程：实例篇 - 阮一峰的网络日志\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E以下是五种布局的flex布局代码：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDOM文档\u003C\u002Fstrong\u003E：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div class=\&layout\&&\n
&aside class=\&aside\&&侧边栏宽度固定&\u002Faside&\n
&div class=\&main\&&主内容栏宽度自适应&\u002Fdiv&\n&\u002Fdiv&\n&div class=\&layout\&&\n
&div class=\&main\&&主内容栏宽度自适应&\u002Fdiv&\n
&aside class=\&aside\&&侧边栏宽度固定&\u002Faside&\n&\u002Fdiv&\n&div class=\&layout\&&\n
&aside class=\&aside\&&左侧边栏宽度固定&\u002Faside&\n
&div class=\&main\&&主内容栏宽度自适应&\u002Fdiv&\n
&aside class=\&aside\&&右侧边栏宽度固定&\u002Faside&\n&\u002Fdiv&\n&div class=\&layout\&&\n
&aside class=\&aside\&&第1个侧边栏宽度固定&\u002Faside&\n
&aside class=\&aside\&&第2个侧边栏宽度固定&\u002Faside&\n
&div class=\&main\&&主内容栏宽度自适应&\u002Fdiv&\n&\u002Fdiv&\n&div class=\&layout\&&\n
&div class=\&main\&&主内容栏宽度自适应&\u002Fdiv&\n
&aside class=\&aside\&&第1个侧边栏宽度固定&\u002Faside&\n
&aside class=\&aside\&&第2个侧边栏宽度固定&\u002Faside&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003ECSS清单\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.layout {\n
display:\n}\n.main {\n
flex: 1;\n}\n.aside {\n
width: 200\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E与之前所讲的几种传统布局方案相比，flex布局的代码可谓异常简洁，而且非常通用，利用简单的三行CSS即实现了常见的五种布局。\u003C\u002Fp\u003E\u003Ch3\u003E总结\u003C\u002Fh3\u003E\u003Cp\u003E传统的布局方法基于盒状模型，依赖 display属性 + position属性 + float属性，逻辑相对复杂，对于实现一些特殊效果，例如垂直居中，尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序，使元素能够尽可能地利用可用空间，同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。\u003C\u002Fp\u003E\u003Cp\u003Eflex布局将是CSS布局的趋势，还未正式成为标准的gird布局也异常吸睛，于是知乎上很多刚入门的小伙伴有了疑惑\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F2Fanswer\u002F\& class=\&internal\&\u003E2017年，圣杯和双飞翼布局已经淘汰了，真的？ - 知乎\u003C\u002Fa\u003E ，对此我个人仍然坚持我的观点,至少在目前过渡阶段，仍然坚持夯实基础，稳步向前。\u003C\u002Fp\u003E\u003Cp\u003E本文完。\u003C\u002Fp\u003E\u003Cp\u003EPS：以后会继续写Flex布局和Grid布局相关文章，欢迎持续关注，也欢迎大家对文章提出建议或意见。由于个人疏忽等原因，本文中难免会存在少量错误，欢迎大家批评指正。QQ交流群：\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fshang.qq.com\u002Fwpa\u002Fqunwpa%3Fidkey%3D1aaeb2eb3f6e26cdcf48e2d8fc71783b\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cstrong\u003E参考链接\u003Cbr\u003E\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fweb.jobbole.com\u002F8F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E圣杯布局小结 - WEB前端 - 伯乐在线\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.imooc.com\u002Fwenda\u002Fdetail\u002F254035\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E双飞翼布局介绍-始于淘宝UED_慕课猿问\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.zhangxinxu.com\u002Fwordpress\u002F\u002F%25E6%E7%E7%259F%25A5%25E7%259A%%25B8%%25A7%258D%25E4%25B8%%25A0%258F%25E7%25BD%%25A1%25B5%25E5%25AE%25BD%25E5%25BA%25A6%25E8%2587%25AA%25E9%E5%25BA%%25B8%%25B1%%%25E6%25B3%F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E我熟知的三种三栏网页宽度自适应布局方法 \& 张鑫旭-鑫空间-鑫生活\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.fscwz.com\u002F\u002F24\u002Fcss-basis-layout-summary\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E常见的几种布局总结\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T23:48:01+08:00&,&url&:&\u002Fp\u002F&,&title&:&CSS布局十八般武艺都在这里了&,&summary&:&布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。目录常用居中方法水平居中垂直居…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:15,&likesCount&:223}},&annotationDetail&:null,&commentsCount&:46,&likesCount&:185,&FULLINFO&:true}},&User&:{&markmfs&:{&isFollowed&:false,&name&:&Mark&,&headline&:&&,&avatarUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-65ec11cb7d4ea2513218f_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&markmfs&,&bio&:&码蜂社(mafengshe.com)导师 前端学习群 &,&hash&:&488b940fa77e95b71a145fcb955d42df&,&uid&:671400,&isOrg&:false,&description&:&&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmarkmfs&,&avatar&:{&id&:&v2-65ec11cb7d4ea2513218f&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimen