Javascript内容理解

已于 2022-04-27 16:34:06 修改
阅读量977 收藏 8
点赞数 3
分类专栏： conclusion 文章标签： javascript
于 2022-04-26 21:13:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47979372/article/details/124423773
版权

目录

1. 对原型和原型链的理解

  • 什么是原型和原型链？
    • 原型：函数中有属性，每个函数中的特殊属性(prototype)叫做原型
    • 原型链：当我们访问某个属性或者方法时，如果当前对象中找不到，就会到当前对象的原型对象中查找，没有继续向上查找，直到顶层原型对象(Object.prototype)，最终如果没有找到就返回undefined，这种查找过程就是链式查找，这整个链条就是原型链
  • 原型和原型链存在的意义？
    • 实例对象中可以共享构造函数中的属性和方法，构造函数原型中的属性和方法越多，节省内存越大

2. 对作用域和作用域的理解

  • 作用域： 作用域是在运行代码中某个特定变量，函数和对象的可访问性，作用域决定了代码区块中变量和其他资源的可见性
  • 作用域存在的意义： 作用域存在最大的意义是变量隔离，不同作用域下同名的变量不会有冲突问题
  • 作用域链： 当我们在某个函数的内部作用域中查找某个变量，如果没有就到他的父级作用域中查找，如果父级也没有就一层层向上查找，如果最终都没有就放弃，这种一层层作用域嵌套关系就是作用域链

3. 对闭包的理解

  • 闭包： 形式为函数嵌套函数，可以访问这个函数内部变量的函数
  • 使用场景：
    • 例如一些事件函数的封装
    • 模拟私有方法
    • 循环中给页面元素绑定事件响应函数
  • 存在问题： 造成内部变量常驻内存

4. call、apply、bind

this 谁调用它就指向谁，而call、apply、bind用来改变this指向

  • 共同点： bind, call, apply都可以改变this指向
  • 不同点：
    1. call和apply的传参方式不同，call直接传递，apply使用数组形式
    2. bind和call, apply的返回值不同，bind返回的是个函数，要指向得再调用
object.say.call(this指向的对象, 参数)
object.say.apply(this指向的对象, ['参数'])
const say = object.say.bind(this指向的对象, 参数);
say();
  • 应用：
// call应用：
// * 判断数据类型
const array = [1,2,3,4];
const type = Object.prototype.toString.call(array);
console.log(type)
// * 类数组转数组
const arrayLike = {
	0: "name",
	1: "age",
	length: 2
}
const res = Array.prototype.slice.call(arrayLike);
console.log(res)

// apply 给定数组求最大值/最小值
const array = [1,2,3,4,5]
const max = Math.max.apply(null, array)
const min = Math.min.apply(null, array)
console.log(max, min)

// bind react类组件事件响应函数得绑定
class App extends React.Component {
	constructor(props) {
		super(props);
		this.name = 'Aaron'
		this.handleClick = this.handleClick.bind(this)
	}
	handleClick() {
		console.log(this.name)
	}
	render() {
		return (
			<button onClick="this.handleClick">点击</button>
		)
	}
}

5. 数组去重

普通数组去重

  • filter + indexOf
const array = [1,2,3,4,5,3,2,1];
function unique(array) {
	if(!Array.isArray(array)) {
		throw new Error("unique function parmas is not Array")
	}
	return array.filter((item, index) => {
		return array.indexOf(item) === index
	})
}
  • 相邻元素排序
const array = [1,2,3,4,5,3,2,1];
function unique(array) {
	array = array.sort()
	let res = [];
	for(let i = 0; i< array.length; i++) {
		if(array[i] !== array[i-1]) {
			res.push(array[i])
		}
	}
	return res
}
const res = unique(array)
  • Set + 解构赋值
function unique(array) {
	return [...new Set(array)]
}
const res = unique(array);
  • Set + Array.from
function unique(array) {
	return Array.from(new Set(array))
}
const res = unique(array);

对象数组去重

  • 临时对象缓存数组项key值
const array = [{name: "Aaron", age: "20"}, {name: "Con", age: "20"}]
function unique(array, key) {
	let result = [];
	let template = {}
	for (let i = 0; i < array.length; i++) {
		var keyname = array[i][key];
		if(template[key]) {
			continue;
		}
		template[keyName] = true;
		result.push(array[i])
	}
	return result;
}
const res = unique(array, 'age');
  • reduce方法 + 缓存对象
const array = [{name: "Aaron", age: "20"}, {name: "Con", age: "20"}]
function unique(array, key) {
	var cacheObject = {}
	return array.reduce((prve, current) => {
		cacheObject[current[key]] ? "" : cacheObject[current[key]] = true && prve.push(current)
		return prve;
	}, [])
}
const res = unique(array, 'age')

6. 对给定数组求最大值

  • Math.max
const res = Math.max(...array)
const res = Math.max.apply(null, array)
  • reduce函数
function getMax(array) {
	return array.reduce((prev, current) => {
		return current > prev ? current: prev
	})
}
const res = getMax(array);
  • sort函数
function getMax(array) {
	const result = array.sort();
	return result[result.length - 1]
}
const res = getMax(array);

7. 判断数据类型

  • typeof
const array = [];
const object = {};
const number = 1;
const string = 'string';

const type = typeof number;
// 优点：使用简单
// 缺点：功能残缺，只能判断： number，string, boolean, undefined, function, symbol
  • Object.prototype.toString.call
const type = Object.prototype.toString.call(array);
// 优点：适用于判断所有数据类型
// 缺点：使用上相对繁琐
  • instanceof(用于类型排除)
//用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
const object = {};
// true
const res = object instanceof Object

8. 如何实现节流函数

  • 概念： 在一个规定的单位时间内，事件函数被触发多次，只生校一次
  • 应用场景： window.onresize / mousemove 等事件监听
  • 函数实现：
function throttle(fn, interval) {
      var timer
      return (event) => {
        if(timer) { return }
        timer = setTimeOut(() => {
          fn(event)
          clearTimeout(timer)
          timer = null
        }, interval)
      }
      
    }
    window.onresize = throttle(function(event) {
      console.log(event)
    }, 2000)

9. 如何实现防抖函数

  • 概念： 事件被触发n秒之后执行回调，如果在这n秒之内又被触发，又重新计时
  • 场景： 商品搜索 / 数据查询等
  • 函数实现：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="search">
  <script>
    const s = document.getElementById('search')
    function debounce(fn, interval) {
      let timer = null
      return (event) => {
        clearTimeout(timer)
        timer = setTimeout(() => fn(event), interval)
      }
    }
    s.oninput = debounce(function(event) {
      const value = s.value
      console.log(value)
    }, 2000)
  </script>
</body>
</html>

10. 实现数组拍平

  • 概念： 指将多维数组变成一维数组，又叫数组扁平化，数组降维
  • 场景： echarts做大屏数据展示
  • 实现：
    • reduce函数
    const array = [1,2,3,4,[5,6,[7,8]]]

function flatten(array) {
  return array.reduce(function(prev, current) {
    return prev.concat(Array.isArray(current)?flatten(current):current)
  }, [])
}
const res = flatten(array)
    • ES6中的flat函数
    const array = [1,2,3,4,[5,6,[7,8]]]

function flatten(array) {
  return array.flat(Infinity);
}

const res = flatten(array)
    • while循环 + 扩展运算符
    const array = [1,2,3,4,[5,6,[7,8]]]

function flatten(array) {
  while(array.som(Array.isArray)) {
  	array = [].concat(..array)
  }
  return arrray
}
const res = flatter(array)

11. 使判断成立

let value = 0;
Object.defineProperty(window, 'a', {
  get() {
    return value += 1
  }
})
if(a === 1 && a === 2 && a === 3) {
  console.log('成立')
}

12. 实现new操作符

const ObjectFactory = (...args) => {
	// 1.创建空对象
	const obj = {}
	// 2.获取构造函数
	const Constructor = [].shift.call(args)
	// 3.对象的_proto_指向Constructor.prototype
	obj._proto_ = Constructor.prototype
	// 4.用apply的方式把构造函数 Constructor的this指向obj执行Constructor
	var ret = Constructor.apply(obj, args)
	// 根据ret的执行结果判断返回构造函数的返回对象还是新创建的空对象
	return typeof ret === 'object'? ret : obj
}

13. 实现bind函数

Function.prototype.bindFn = function() {
	const fn = this
	const obj = arguments[0]
	const args = [].slice.call(arguments, 1)
	return function() {
		const returnArgs = [].slice.call(arguments)
		fn.apply(obj, args.concat(returnArgs))
	}
}

14. 实现call和apply函数

// call函数
Function.prototype.callFn = function(context, ...args) {
	args = args || []
	const key = Symbol()
	context[key] = this
	const result = context[key](...args)
	delete context[key]
	return result
}

// apply函数
Function.prototype.applyFn = function(context, args) {
	args = args || []
	const key = Symbol()
	context[key] = this
	const result = context[key](...args)
	delete context[key]
	return result
}

15. 实现instanceof

function instance_of(Obj, Constructor) {
	let implicitPrototype = Obj._proto_
	let displayPrototype = Constructor.prototype
	while(true) {
		if(implicitPrototype === null) {
			return false
		} else if (implicitPrototype === displayPrototype) {
			return true
		}
		implicitPrototype = implicitPrototype._proto_
	}
}
Aaron Con
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniCloud 统一拦截器使用
asstudio的专栏
10-05 1135
// 统一的错误拦截 uniCloud.addInterceptor('callFunction',{ success(res){ const {result}=res if(result.errCode!==0){ throw new Error(result.errMsg) } } })
理解Javascript
03-02
01_理解内存分配在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，...
ajax中res和req,javascript – 来自AJAX调用的res.redirect
weixin_33744799的博客
08-05 513
我正在尝试在ajax put请求之后进行重定向.我打算使用纯JS客户端进行验证.客户：$(document).ready(function() {login = () => {var username = $("[name='username']").val()var password = $("[name='password']").val()$.ajax({type: "put",url...
html引入res资源,pageres-JavaScript中文网-JavaScript教程资源分享门户
weixin_39898854的博客
06-03 192
Capture website screenshots Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different w...
解构语法；对象解构赋值；const { code, tenantId } = res.data.data；
最新发布
staunch_firm的博客
05-30 276
这行代码使用了对象解构赋值的语法。通过对象解构赋值，可以更简洁地从对象中提取出需要的属性值，提高了代码的可读性和简洁性。属性解构出来，然后使用解构后的变量进行条件判断，简化了代码并提高了可读性。例：getUserInfo().then((res) => {是一个对象，通过解构赋值语法可以从这个对象中提取出。两个属性，并分别赋值给对应的变量。
javascript 变量声明 const res和var res的区别
m0_57464082的博客
04-19 187
来声明变量，这样可以提高代码的可读性和可维护性，并且可以避免意外的变量修改。只有在需要修改变量值的情况下，才考虑使用。则可以随时修改其值。通常情况下，建议优先使用。是一个常量，其值在赋值后不能再修改。
ES6笔记之一 let const 解构
随风而去
06-15 272
ES6
深入理解JavaScript
06-27
基于对象很好理解，毕竟在 JavaScript 中⼀切都是对象，我们随时可以使⽤点号操作符来调 某个对象的⽅法。但是⼗多年前，我们编写 JavaScript 程序时，都是像 C 语⾔那样使⽤函数来组织我们的程序的，只有在论坛的...
深入理解JavaScript 5分
12-07
深入理解JavaScript深入理解JavaScript深入理解JavaScript
Vue的学习笔记 ---- 015 使用ajax
热门推荐
诗水人间
09-07 3万+
方式一：使用vue-resource npm install --sava vue-resource main.js 导入和使用 import VueResource from 'vue-resource' Vue.use(VueResource) //给Vue对象添加$http属性 获得get()和post()方法 代码： <template> &...
前端：你不知道的async await
接着奏乐接着舞的博客
02-24 4981
你是否知道async是什么？作用是什么？await是什么执行逻辑是怎样的？await下面的代码是什么样的执行顺序？
const关键字作用总结
lf1570180470的博客
02-23 1万+
const关键字 const是constant的简写，只要一个变量前面用const来修饰，就意味着该变量里的数据可以被访问，不能被修改。也就是说const意味着“只读”readonly 规则：const离谁近，谁就不能被修改； const修饰一个变量，一定要给这个变量初始化值，若不初始化，后面就无法初始化。 本质：const在谁后面谁就不可以修改，const在最前面则将其后移一位，二者等效
es6 - 块级作用域
weixin_34107955的博客
02-16 135
let const和块级作用域 在js高程中，作者强调说js没有块级作用域。然而，这种情况在es6中发生了改变，es6通过在代码块中使用let, const引入了块级作用域的特性。下面是对此特性的介绍。 语法 es5作用域和变量提升 首先，在es5中，只有两种作用域，函数作用域和全局作用域。 所有的变量和函数声明都存在于这两种作用域中。 ...
const {data:res} = await login(this.loginForm)
xiao_xiao_o的博客
07-06 6402
这是es6中对象的解构赋值。 es6中对象的解构赋值： let [a,b,c] = [1,2,3]; a //1 b //2 c //3
vue 解析Url参数用例
qq_32421489的博客
11-23 983
/** * 解析url参数 */ export function parseQuery() { const res = {}; const query = (location.href.split("?")[1] || "") .trim() .replace(/^(\?|#|&)/, ""); if (!query) { return res; } query.split("&").forEach(param => { c...
图片从前端回传到后端实现思路总结
qq_45327886的博客
04-22 8946
图片从前端回传到后端实现思路
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
三分恶的博客
11-05 628
转载   原文作者：伍华聪    原文地址：https://www.cnblogs.com/wuhuacong/p/13158307.html 文章目录1、ABP开发框架的回顾2、Vue+Element整合ABP框架的前端登录处理 VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用（如果不知道，请自行补习一下我的随笔：ABP框架使用），ABP框架作为后端，是一个非常不错的技术方向，但是前端再.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值