JavaScript 的类与继承
类的声明与实例化类的声明一般有两种方式 1234567891011//类的声明var Animal = function () { this.name = 'Animal';};//ES6中类的声明class Animal2 { constructor () { this.name = 'Animal2'; }} 实例化就比较简单，直接用 new 运算符 123new Animal()new Animal2() 上面第一行应该是 new Animal()（手滑拼错经常发生），概念上就是“用构造函数创建实例”。 这些比较简单，简单介绍一下就可以了。接下来，介绍本文的重点内容，继承。 如何实现继承实现继承的方式主要有两种： 第一种借助构造函数实现继承 先看个了例子 12345678function Parent1 () { this.name = 'parent1';}function Child1 (...
详谈 JavaScript 原型链
创建对象的方法原型链这块最容易把人绕晕，我建议从“对象是怎么来的”开始看：常见创建对象方式大概三种。 代码： 123456789101112131415<script type="text/javascript"> // 第一种方式：字面量 var o1 = {name: 'o1'} var o2 = new Object({name: 'o2'}) // 第二种方式：构造函数 var M = function (name) { this.name = name; } var o3 = new M('o3') // 第三种方式：Object.create var p = {name: 'p'} var o4 = Object.create(p) console.log(o1) console.log(o2) console.log(o3) console.log(...
三栏布局的五种解决方案及优缺点
问题假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 三栏布局本身不难，难的是“你能不能说清楚为什么这么写、有什么坑、还有哪些替代方案”。 面试爱问这题也很现实：它覆盖了 float/定位/flex/table/grid 这些布局心智。只会写一种当然也能做出来页面，但遇到兼容性、内容高度变化、或者要做响应式的时候，就会暴露短板。 样式下面是5种三栏布局的方法。在写布局代码之前，先写两段公共的样式，此段写在头部。 12345678910<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> 1. 浮动布局1234567891011121314151617181920212223242526...
深入理解 CSS 盒模型
前言盒模型这题看起来“太基础”，但真要讲清楚，细节不少：box-sizing 影响宽高怎么算；margin 为啥会重叠；BFC 又是怎么一把解决一类布局问题的。 下面按几个常见问题把它捋一遍： 基本概念：标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题（根据盒模型解释边距重叠） BFC（边距重叠解决方案） 基本概念盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高， 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。 css如何设置两种模型这里用到了CSS3 的属性 box-sizing 12345/* 标准模型 */box-sizing: content-box;/* IE 模型 */box-sizing: border-box; JS获取宽高通过JS获取盒模型对应的宽和高，有以下几种方法： 为...
深入解析 Cookie、sessionStorage 和 localStorage 的区别
Cookie、sessionStorage、localStorage 这三个东西，日常开发里几乎天天见：登录态、埋点、用户偏好、临时缓存…… 它们的区别不只是“大小不一样”，更关键的是：生命周期、是否随请求携带、以及安全边界。选错了要么拖慢请求，要么埋下安全坑。 1. 容量限制与数据格式 存储方式 容量限制 数据格式 Cookie 4KB 只能存储字符串 sessionStorage 约 5MB 只能存储字符串（可转换为 JSON） localStorage 约 5MB 只能存储字符串（可转换为 JSON） 补一句：虽然 sessionStorage/localStorage 只能存字符串，但可以用 JSON.stringify() 存对象，取出时 JSON.parse() 还原。 1234const user = { name: "张三", age: 25 };localStorage.setItem("user", JSON.stringify(user));const store...
