一些手写JavaScript常用的函数汇总(2)

析：首先typeof是位于window对象上的全局方法，所以我们定义完成之后要将其挂载到window上，其次要实现识别所有数据类型包括：基本数据类型和复杂数据类型(引用数据类型)，我们需要通过Object.prototype.toString方法去做才唯一能够最准确判断当前值为什么数据类型，实现代码如下

window.typeof = function (value) { return Object.prototype.toString.call(val).slice(8, -1) }

八、实现数组的去重方法

分析：首先因为是给所有数组实例实现一个去重方法，所以同样是在原型链上进行编程

Array.prototype.unique = function () { //这里是利用对象键hash值的唯一性来去重 var obj = {} var result = [] for (var i = 0; i < this.length; i++) { if (!obj[this[i]]) { obj[this[i]] = true result.push(this[i]) } } return result } var arr = [1,2,2,3,3] arr.unique() //[1,2,3]

Array.prototype.unique = function () { //利用ES6的Array.prototype.includes var result = [] for (var i = 0; i < this.length; i++) { if (!result.includes(this[i])) { result.push(this[i]) } } return result }

Array.prototype.unique = function () { //利用ES6的Set var result = new Set(this) //生成一个类数组 return Array.from(result) //通过Array.from将类数组转换成真正的数组 }

Array.prototype.unique = function () { //利用Array.prototype.filter返回符合条件的元素 //利用Array.prototype.indexOf返回数组中第一次出现当前元素的索引值 //该方法写法最为优雅，一行代码搞定，函数式编程 return this.filter((item, index) => this.indexOf(item) === index) }

九、实现函数的防抖、节流

function debounce (fn, wait=300) { var timer return function () { if (timer) { clearTimeOut(timer) } timer = setTimeout({ fn.apply(this, arguments) }, wait) } } function throttle (fn, wait=300) { var prev = +new Date() return function () { var now = +new Date() if (prev - now > 300) { fn.apply(this, arguments) prev = now } } }

十、封装ajax

function ajax (options) { options = options || {} options.url = options.url || '' options.method = options.method.toUpperCase() || 'GET' options.async = options.async || true options.data = options.data || null options.success = options.success || function () {} var xhr = null if (XMLHttpRequest) { xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } xhr.open(options.url, options.method, options.async) var postData = [] for (var key in options.data) { postData.push(key + '='+ options.data[key]) } if (options.method === 'POST') { xhr.open(options.method, options.url, options.async ) xhr.send(postData) } else if (options.method === 'GET') { xhr.open(options.mehtod, options.url + postData.join('&'), options.async) xhr.send(null) } xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { options.success(xhr.responseText) } } }

十一、实现new操作符

function ajax (options) { options = options || {} options.url = options.url || '' options.method = options.method.toUpperCase() || 'GET' options.async = options.async || true options.data = options.data || null options.success = options.success || function () {} var xhr = null if (XMLHttpRequest) { xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } xhr.open(options.url, options.method, options.async) var postData = [] for (var key in options.data) { postData.push(key + '='+ options.data[key]) } if (options.method === 'POST') { xhr.open(options.method, options.url, options.async ) xhr.send(postData) } else if (options.method === 'GET') { xhr.open(options.mehtod, options.url + postData.join('&'), options.async) xhr.send(null) } xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { options.success(xhr.responseText) } } }

十二、常用六种继承方式

1、原型链继承：子类型的原型对象为父类型的实例对象

function Person (name, age) { this.name = name this.age = age } Person.prototype.setName = function () { console.log(this.name) } function Student (height) { this.height = height } Student.prototype = new Person() var stu = new Student('175') console.log(stu)

2、借用构造函数实现继承：在子类的构造函数中通过call调用父类的构造函数实现继承

function Person (name, age) { this.name = name this.age = age } Person.prototype.setName = function () { console.log(this.name) } function Student (height, age, name) { Person.call(this, age, name) this.height = height } var stu = new Studeng(175, 'cs', 24) console.log(stu)