技术清单

[[toc]]

js正则删除行内块之间的空格

let rep = function (match, item1, item2, item3) {
// item2 是空格部分
return item1 + item3
}
let source = template.content.replace(/(>)(\s*)(<)/g, rep);

本地缓存

localStorage的库

yarn add store

JS检测本地储存localStorage的变化

window.addEventListener('storage', function(event){
console.log(event)
})

IndexedDB的库

yarn add hello-indexeddb

页面直接编辑

document.body.contentEditable = true

双向数据绑定

defineProperty版本

<input type="text" id="input">
<span id="text"/>

const data = {};
Object.defineProperty(data, 'text', {
set(value) {
this.value = value;

input.value = value;
text.innerText = value;

return value
},
get(val) {
console.log('获取值', this); //this就是当前的对象
return val
}
});

input.oninput = function (e) {
console.log(data.text = e.target.value);
console.log(data.text);
};

proxy版本

<input type="text" id="input">
<span id="text"/>

const data = {};
const handler = {
set(target, key, value) { //当前对象 key 当前值
target[key] = value;
input.value = value;
text.innerText = value;
return value
},
get(obj, value, target) {//{key:当前值} 当前值 当前对象
console.log('获取值')
return value
}
};

const proxy = new Proxy(data, handler);

input.oninput = function (e) {
proxy.text1 = e.target.value
console.log(proxy.text2 = e.target.value);
console.log(proxy.text1);
};

节流防抖

/**
* 找到并返回应项的索引
* @param list list
* @param music 查找对象
*/
export const findIndex = (list, music) => {
return list.findIndex((item) => {
return item.id === music.id
})
};
// 防抖函数
export const debounce = function (func, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
};

// 节流函数
export const throttle = function (func, delay) {
let now = Date.now();
return function (...args) {
const current = Date.now();
if (current - now >= delay) {
func.apply(this, args);
now = current
}
}
};

导出表格

const url = window.URL.createObjectURL(
new Blob([res], { type: "application/vnd.ms-excel" })
);
const fileName = `操作日志${dayjs().format("YYYY-MM-DD")}.xls`;
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);

document.body.appendChild(link);
link.click();
//释放URL对象所占资源
window.URL.revokeObjectURL(url);
//用完即删
document.body.removeChild(link);

window.requestAnimationFrame & window.requestIdleCallback

软知识:

  1. 屏幕刷新频率: 屏幕每秒出现图像的次数,普通笔记本为60Hz.

  2. 动画原理: 计算机每16.7ms刷新一次(1000/60),由于人眼的视觉停留,所以看起来是流畅的移动。

  3. setTimeout: 通过设定间隔时间来不断改变图像位置,达到动画效果。但是容易出现卡顿、抖动的现象;原因是:

    1、settimeout任务被放入异步队列,只有当主线程任务执行完后才会执行队列中的任务,因此实际执行时间总是比设定时间要晚;

    2、settimeout的固定时间间隔不一定与屏幕刷新时间相同,会引起丢帧。

  4. requestAnimationFrame: 优势:

    1.由系统决定回调函数的执行时机,60Hz的刷新频率,那么每次刷新的间隔中会执行一次回调函数,不会引起丢帧,不会卡顿

    2.CPU节能:使用setTimeout实现的动画,当页面被隐藏或最小化时setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,
    刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,
    因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。

    3.函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,
    使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。

requestAnimationFrame

 //回到顶部
const goTop=()=> {
let product_content = document.getElementById('product_content');
this.progress = product_content.scrollTop;
if (this.progress >= 0) {
window.requestAnimationFrame(this.step);
}
}

export const step= ()=> {
let product_content = document.getElementById('product_content');
if (this.progress > 0) {
this.progress -= 250; //这里可以根据高度成比例减少,不会突兀
product_content.scrollTop = this.progress;
window.requestAnimationFrame(this.step);
}else{
window.cancelAnimationFrame(this.step);
}
}

requestIdleCallback

浏览器每一帧都需要完成哪些工作?

通过上图可看到,一帧内需要完成如下六个步骤的任务:

处理用户的交互

JS 解析执行

帧开始。窗口尺寸变更,页面滚去等的处理

requestAnimationFrame(rAF)

布局

绘制

上面六个步骤完成后没超过16.7ms,说明时间有富余,此时就会执行requestIdleCallback里注册的任务(requestIdleCallback的时长并不是16ms,他是一个肉眼觉察不到的时间),如果没rAF这样的循环处理,浏览器一直处于空闲状态的话,deadline.timeRemaining可以得到的最长时间

空闲时段这种情况下,用户代理可能没有即将完成的任务,可以限制空闲周期的结束。为了避免在不可预测的任务(例如用户输入的处理)中引起用户可察觉的延迟,这些空闲周期的长度应限制为最大值50ms。

最大期限为50毫秒,是根据研究[ RESPONSETIME ] 得出的,该研究表明,对用户输入的100毫秒以内的响应通常被认为对人类是瞬时的。将闲置截止期限设置为50ms意味着即使在闲置任务开始后立即发生用户输入,用户代理仍然有剩余的50ms可以在其中响应用户输入而不会产生用户可察觉的滞后。

API

var handle = window.requestIdleCallback(callback[, options])
  • callback:回调,即空闲时需要执行的任务,该回调函数接收一个IdleDeadline对象作为入参。其中IdleDeadline对象包含:
    • didTimeout,布尔值,表示任务是否超时,结合 timeRemaining 使用。
    • timeRemaining(),表示当前帧剩余的时间,也可理解为留给任务的时间还有多少。
  • options:目前 options 只有一个参数
    • timeout。表示超过这个时间后,如果任务还没执行,则强制执行,不必等待空闲
requestIdleCallback(myNonEssentialWork, { timeout: 2000 });
// 任务队列
const tasks = [
() => {
console.log("第一个任务");
},
() => {
console.log("第二个任务");
},
() => {
console.log("第三个任务");
},
];

function myNonEssentialWork (deadline) {
// 如果帧内有富余的时间,或者超时
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
work();
}

if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}

function work () {
tasks.shift()();
console.log('执行任务');
}

超时的情况,其实就是浏览器很忙,没有空闲时间,此时会等待指定的 timeout 那么久再执行
,通过入参 dealine 拿到的 didTmieout 会为 true,同时 timeRemaining () 返回的也是 0
超时的情况下如果选择继续执行的话,肯定会出现卡顿的,因为必然会将一帧的时间拉长

cancelIdleCallback

与 setTimeout 类似,返回一个唯一 id,可通过 cancelIdleCallback 来取消任务。

MutationObserver

MutationObserver 是一个可以监听DOM结构变化的接口。

异步的 (微任务)

  • childList:如果突变目标的子代被观察,则设置为 true。
  • attributes:如果要观察目标属性的突变,则设置为 true。 如果指定了 attributeOldValue 和(或)attributeFilter,则可以省略。
  • characterData:如果要观察到目标数据的突变,则设置为 true。 如果指定了characterDataOldValue,则可以省略。
  • subtree:如果突变不仅仅是目标对象,而且包括目标的后代(descendants),则设置为 true。
  • attributeOldValue:如果前面的 attributes 属性设置为 true 或省略,并且目标的属性值在突变前要做记录,则设置为 true。
  • characterDataOldValue:如果前面的 characterData 属性设置为 true 或省略,并且目标的数据在突变前要做记录,则设置为 true。
  • attributeFilter:设置为属性本地名称列表(没有命名空间),如果不是所有属性突变都需要观察,属性为 true 或省略。例如:[‘class’,’src’]
new MutationObserver(() => {
let dom = document.body.getAttribute('data-random')
console.log(dom) // 如果用户修改body的属性,就会触发这个方法
}).observe(document.body, {
attributes: true
})

document.body.setAttribute('data-random', Math.random())
document.body.setAttribute('data-random', Math.random())
document.body.setAttribute('data-random', Math.random())

// 只会输出一次 ovserver

ResizeObserver

ResizeObserver 创建一个新的ResizeObserver对象监听元素大小变化

这个接口可以监听到元素的变化,以前我们只能通过window.resize来监听页面变化,现在有了这个API任何元素都可以监听

<!--html-->
<textarea id="main"></textarea>

// javascript

let mainEl = document.querySelector('#main')
const resizeObserver = new ResizeObserver(entries => {
console.log(entries)
})

//拉动textarea的大小,即可看到输出
// 监听元素大小改变
resizeObserver.observe(mainEl) //ResizeObserverEntry [{target: textarea#main, contentRect: {x: 2, y: 2, width: 143, height: 43, top: 2, …}}]

// 取消某个元素监听
//resizeObserver.unobserve(mainEl)

// 取消全部元素监听
//resizeObserver.disconnect()

IntersectionObserver 是否可见

const observer = new IntersectionObserver(function(changes) {
console.log(changes);
changes.forEach(function(element, index) {
// statements
if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
element.target.src = element.target.dataset.src;
}
});
});


function addObserver() {
let listItems = document.querySelectorAll('.list-item-img');
listItems.forEach(function(item) {
observer.observe(item);
});
}

addObserver();

Es6模块导入

import * as xxx from ‘xxx’:  // 会将若干export导出的内容组合成一个对象返回;
import {a,b,c,...} from ‘xxx’

import xxx from ‘xxx’:(export default xxx)// 只会导出这个默认的对象作为一个对象

export {default as docs} from "./xxx" // 可以作为入口 统一导出

Tay Catch

try {
value = this.getter.call(vm, vm)
} catch (e) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} finally {
console.log('失败与否必须执行')
}

控制进度 (任务编排)

// 控制加载
class Deferred {
constructor() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
}
}
let frameworkStartedDefer = new Deferred()
async function ff() {
await frameworkStartedDefer.promise;
console.log(121212)
}
ff();
frameworkStartedDefer.resolve()

睡觉函数

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function ff() {
await sleep(3000);
console.log(121212)
}
ff();

弱网检测

const isSlowNetwork = navigator.connection
? navigator.connection.saveData ||
(navigator.connection.type !== 'wifi' &&
navigator.connection.type !== 'ethernet' &&
/(2|3)g/.test(navigator.connection.effectiveType))
: false;
if (!navigator.onLine || isSlowNetwork) {
return;
}

userAgent

// 判断浏览器内核、手机系统等,使用 browser.userAgent.mobile
var browser = {
userAgent: function () {
var ua = navigator.userAgent;
var ualower = navigator.userAgent.toLocaleLowerCase();
return {
trident: ua.indexOf('Trident') > -1, // IE内核
presto: ua.indexOf('Presto') > -1, // opera内核
webKit: ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, // 火狐内核
mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), // 是否为移动终端
ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // IOS终端
android: ua.indexOf('Android') > -1, // 安卓终端
iPhone: ua.indexOf('iPhone') > -1, // 是否为iphone或QQHD浏览器
iPad: ua.indexOf('iPad') > -1, // 是否为iPad
webApp: ua.indexOf('Safari') == -1, // 是否web应用程序,没有头部与底部
QQbrw: ua.indexOf('MQQBrowser') > -1, // QQ浏览器(手机上的)
weiXin: ua.indexOf('MicroMessenger') > -1, // 微信
QQ: ualower.match(/\sQQ/i) == " qq", // QQ App内置浏览器(需要配合使用)
weiBo: ualower.match(/WeiBo/i) == "weibo", // 微博
ucLowEnd: ua.indexOf('UCWEB7.') > -1, //
ucSpecial: ua.indexOf('rv:1.2.3.4') > -1,
webview: !(ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)) && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),
ucweb: function () {
try {
return parseFloat(ua.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
} catch (e) {
if (ua.indexOf('UC') > -1) {
return true;
}
return false;
}
}(),
Symbian: ua.indexOf('Symbian') > -1,
ucSB: ua.indexOf('Firofox/1.') > -1
};
}()
};

import和require区别

//index.tsx
console.log(1)
import {sum} from "./sum"
console.log(sum(1,2))

//sum.tsx
console.log(2)
export const sum=(a,b)=>a+b;

//result: 2,1,3

//import命令是编译阶段执行的,在代码运行之前。因此这意味着被导入的模块会先运行,而导入模块的文件会后执行
//如果是require()结果会依次打印出来,1,2,3

检测数据类型

typeof

//typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果:
number,boolean,string,function(函数),symbol,objectNULL,数组,对象),undefined

instanceof

[1, 2, 3] instanceof Array; //true
//可以看到[1, 2, 3]是类型Array的实例
[1, 2, 3] instanceof Object; //true

//封装
function myInstanceof(val, type) {
let rightProto = type.prototype; // 取右边 prototype的值
let leftPrevProto = val.__proto__; // 取左边__proto__值
while (true) {
if (leftPrevProto === null) { //如果左边的__proto__值为null,返回false
return false;
}
if (leftPrevProto === rightProto) {
return true;
}
leftPrevProto = leftPrevProto.__proto__ ; //以上都不满足,取上一层原型继续循环,直到没取到为null
}
}

constructor

1:null 和 undefined 无constructor,这种方法判断不了。

2:还有,如果自定义对象,开发者重写prototype之后,原有的constructor会丢失,因此,为了规范开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。

''.constructor===String
new Number(111).constructor===Number
(11).constructor===Number
false.constructor===Boolean
new Date().constructor===Date
new Function().constructor===Function
[].constructor===Array

class Chameleon {
constructor({ newColor = "green" } = {}) {
this.newColor = newColor;
}
}
Chameleon.constructor===Function
new Chameleon().constructor.constructor===Function
Object.prototype.toString.call(new Chameleon().constructor) //"[object Function]"
new ew Chameleon().constructor===Function //false

Object.prototype.toString.call()

function is(type, obj) {
var clas = Object.prototype.toString.call(Object(obj)).slice(8, -1); //Object(null)
return obj !== undefined && obj !== null && clas === type;
}

is('String', 'test'); // true
is('String', new String('test')); // true

HTML页面加载完毕后运行JS

window.onload=function(){}  //可以判断js时候加载完毕

$(function(){});
$(document).ready(function(){})
//当dom加载完就可以执行(比window.onload更早)

两者的主要区别

当一个文档完全下载到浏览器中时,才会触发window.onload事件

$(document).ready{ }是在DOM完全就绪并可以使用时调用,此时可能图片等还可能没有下载完成

Symbol

//Symbol 是基本数据类型  

const Age=Symbol();

typeof Age === 'symbol'
//属性名 为不可枚举属性

let obj = {
[Symbol('name')]: '一斤代码',
age: 18,
title: 'Engineer'
}

Object.keys(obj) // ['age', 'title']

for (let p in obj) {
console.log(p) // 分别会输出:'age' 和 'title'
}

Object.getOwnPropertyNames(obj) // ['age', 'title']

JSON.stringify(obj) // {"age":18,"title":"Engineer"}

//一些专门针对Symbol的API
// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]

// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']
//使用Symbol代替REDUX的常量
// const TYPE_AUDIO = 'AUDIO'
// const TYPE_VIDEO = 'VIDEO'
// const TYPE_IMAGE = 'IMAGE'

const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

小东西

  • 显示版本号

    const pkg = require('../package.json');
    window.mmPlayer = window.mmplayer = `欢迎使用
    当前版本为:V${pkg.version}
    作者:${pkg.auter}`
    console.info(`%c${window.mmPlayer}`, `color:blue`);
  • 耗时监控

    console.time(111)

    Array(1000000).keys()
    console.timeEnd(111) //111: 8.5390625ms
  • table

    console.table()
  • 清空控制台历史记录

    • 在控制台右键,或者按下 Ctrl 并单击鼠标,选择 Clear Console。
    • 在脚本窗口输入 clear()执行。
    • 使用快捷键 command + K
  • 切换主题

Chrome 提供了 亮&暗 两种主题,当你视觉疲劳的时候,可以 switch 哦, 快捷键 command+shift+p ,打开 Command Menu,输入 theme ,即可选择切换

Think 循环

<if condition="$Think.get.edit == 1 OR $Think.get.judge == 1">disabled</if> 
<?php if($_GET['id'] == $parter['id']){ echo "selected";}?>
<?php dump ($vo)?>


<volist name="areas" id="vo"></volist>

js文件压缩原因和压缩原理

压缩: 删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格,从而压缩 JS 文件大小。

混淆: 经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 Javascript 源代码。

javascript文件压缩的原理

第一个当然就是去掉注释了。

另外就是跟CSS压缩相同的去掉换行符,空格什么的。

JAVASCRIPT中有几种变量形式,如变量,函数名,函数的参数等,通常我们在手写JS代码的时候,为了便于理解,我们都会给这些变量名以直观易懂的字符串,如:var title=”javascript”;这个习惯是值得推崇的。

但是,这些变量对于用户理解有帮助,对于计算机却没什么影响,如果我们把前面的句子变成:var a=”javascript”;对电脑来讲是一样的。

通常深度压缩JS都必须要做的一步就是尽量地缩短变量名,因为一份体积巨大的JS代码,其中的变量名会占去不少空间。

26个单字母,几乎就可以把一个函数中所有的参数都写完,所以我们经常在压缩版的JS代码中发现a,b,c,d之类的连续变量。

另外,Javascript有个特性就是不同作用域的变量名可以任意重复,所以此函数中有a,b,c,d,其他函数也可以有。这样短又大量重复的变量可以让人索云里雾里不知所云,也变相的起到了加密JS代码的作用.

注意

  1. 压缩前的代码格式要标准。因为去掉换行与空格时,所有语句就变成一行了,如果你的代码有瑕疵(比如某行少了个分号),那就会导致整个文件报错。当然,现在有的压缩工具已经比较智能了。
  2. 备份原文件
  3. 压缩很可能不会一次成功,一般要多试,多改

window.performance API

允许网页访问某些函数来测量网页和Web应用程序的性能,包括 Navigation Timing API和高分辨率时间数据

function getPerformanceTiming () {
var performance = window.performance;

if (!performance) {
// 当前浏览器不支持
console.log('你的浏览器不支持 performance 接口');
return;
}

var t = performance.timing;
var times = {};

//【重要】页面加载完成的时间
//【原因】这几乎代表了用户等待页面可用的时间
times.loadPage = t.loadEventEnd - t.navigationStart;

//【重要】解析 DOM 树结构的时间
//【原因】反省下你的 DOM 树嵌套是不是太多了!
times.domReady = t.domComplete - t.responseEnd;

//【重要】重定向的时间
//【原因】拒绝重定向!比如,http://example.com/ 就不该写成 http://example.com
times.redirect = t.redirectEnd - t.redirectStart;

//【重要】DNS 查询时间
//【原因】DNS 预加载做了么?页面内是不是使用了太多不同的域名导致域名查询的时间太长?
// 可使用 HTML5 Prefetch 预查询 DNS ,见:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;

//【重要】读取页面第一个字节的时间
//【原因】这可以理解为用户拿到你的资源占用的时间,加异地机房了么,加CDN 处理了么?加带宽了么?加 CPU 运算速度了么?
// TTFB 即 Time To First Byte 的意思
// 维基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte
times.ttfb = t.responseStart - t.navigationStart;

//【重要】内容加载完成的时间
//【原因】页面内容经过 gzip 压缩了么,静态资源 css/js 等压缩了么?
times.request = t.responseEnd - t.requestStart;

//【重要】执行 onload 回调函数的时间
//【原因】是否太多不必要的操作都放到 onload 回调函数里执行了,考虑过延迟加载、按需加载的策略么?
times.loadEvent = t.loadEventEnd - t.loadEventStart;

// DNS 缓存时间
times.appcache = t.domainLookupStart - t.fetchStart;

// 卸载页面的时间
times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;

// TCP 建立连接完成握手的时间
times.connect = t.connectEnd - t.connectStart;

return times;
}

计算性能指标

可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标,比如DNS查询耗时、白屏时间、domready等等。如下:

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

读取注释


function eachComment(ele) {
let child = ele.childNodes[0];
if (child.nodeType === 8) {
console.log(child.nodeValue);
}
}
let bodyElement = document.getElementsByTagName("body")[0];
eachComment(bodyElement);

es5的几种继承方式

对象冒充实现继承

function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}

}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');

}

//Web类 继承Person类 对象冒充的组合继承模式
function Web(){
Person.call(this); /*对象冒充实现继承*/
}
var w=new Web();
// w.run(); //**对象冒充可以继承构造函数里面的属性和方法**

w.work(); //对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法

原型链实现继承

function Person(name,age){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}

//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(name,age){
}

Web.prototype=new Person(); //原型链实现继承
var w=new Web();
//原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
//w.run();

w.work();
//缺点是实例化子类的时候没法给父类传参

原型链+对象冒充的组合继承模式

function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}

}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');

}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
}

Web.prototype=new Person();//上面已经继承了构函数的方法 , 这里new 一个会重新继承狗杂函数的方法 ,所以这里可以直接 -> Web.prototype=Person.prototype;

var w=new Web('赵四',20);

// w.run();
w.work();

// var w1=new Web('王五',22);

class实现继承源码

ES6

class B {
constructor(props) {
this.name = props.name;
}
}
class A extends B {
constructor() {
// 向父类传参
super({ name: 'B' });
// this 必须在 super() 下面使用
console.log(this);
}
}

ES5

function __extends(child, parent) {
// 修改对象原型
Object.setPrototypeOf(child, parent);
// 寄生继承,创建一个干净的构造函数,用于继承父类的 prototype
// 这样做的好处是,修改子类的 prototype 不会影响父类的 prototype
function __() {
// 修正 constructor 指向子类
this.constructor = child;
}
// 原型继承,继承父类原型属性,但是无法向父类构造函数传参
child.prototype =
parent === null
? Object.create(parent)
: ((__.prototype = parent.prototype), new __());
}
var B = (function () {
function B(props) {
this.name = props.name;
}
return B;
}());
var A = (function (_super) {
__extends(A, _super);
function A() {
var _this = _super.call(this, { name: 'B' }) || this; // // 向父类传参
// this 必须在 super() 下面使用
console.log(_this);
return _this;
}
return A;
}(B));

参看文档

github
博客1
博客2
博客3