function fn(){
var name=‘hello’
setName=function(n){
name = n;
}
getName=function(){
return name;
}
//将setName，getName作为对象的属性返回
return {
setName:setName,
getName:getName
}
}
var fn1 = fn();//返回对象，属性setName和getName是两个函数
console.log(fn1.getName());//getter
fn1.setName(‘world’);//setter修改闭包里面的name
console.log(fn1.getName());//getter
第一次输出 hello 用setter以后再输出 world ，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。
题目7：迭代器（执行一次函数往下取一个值）
var arr =[‘aa’,‘bb’,‘cc’];
function incre(arr){
var i=0;
return function(){
//这个函数每次被执行都返回数组arr中 i下标对应的元素
return arr[i++] || ‘数组值已经遍历完’;
}
}
var next = incre(arr);
console.log(next());//aa
console.log(next());//bb
console.log(next());//cc
console.log(next());//数组值已经遍历完
题目8：首次区分（相同的参数，函数不会重复执行）
var fn = (function(){
var arr=[];//用来缓存的数组
return function(val){
if(arr.indexOf(val)==-1){//缓存中没有则表示需要执行
arr.push(val);//将参数push到缓存数组中
console.log(‘函数被执行了’,arr);
//这里写想要执行的函数
}else{
console.log(‘此次函数不需要执行’);
}
console.log(‘函数调用完打印一下，方便查看已缓存的数组：’,arr);
}
})();
fn(10);
fn(10);
fn(1000);
fn(200);
fn(1000);
执行结果
可以明显的看到首次执行的会被存起来，再次执行直接取。
题目9：缓存
//比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算
var fn=(function(){
var cache={};//缓存对象
var calc=function(arr){//计算函数
var sum=0;
//求和
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
return sum;
}
return function(){
var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组
var key=args.join(“,”);//将args用逗号连接成字符串
var result , tSum = cache[key];
if(tSum){//如果缓存有
console.log(‘从缓存中取：’,cache)//打印方便查看
result = tSum;
}else{
//重新计算，并存入缓存同时赋值给result
result = cache[key]=calc(args);
console.log(‘存入缓存：’,cache)//打印方便查看
}
return result;
}
})();
fn(1,2,3,4,5);
fn(1,2,3,4,5);
fn(1,2,3,4,5,6);
fn(1,2,3,4,5,8);
fn(1,2,3,4,5,6);
输出结果：
题目10：节流函数
节流函数的作用是在限定的时间内函数只执行一次，比如：
1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。
2.scroll、mousehover、mousemove等触发频率高的时候。
主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行 。
test
这里限定了按钮的点击时间，2000毫秒之内只有第一次会被执行，多次点击的话无效。
总结：闭包可以说无处不在，所以闭包这些场景，还是很值得研究一番。
5、原型与原型链
题目1：
function F() {
this.a = 1;
}
var obj = new F();
console.log(obj.prototype);//打印undefined 对象只有 __proto__属性没有prototype属性，函数才有
题目2：
Object.prototype.a = 1;
var obj = {
b: 2
};
for(var i in obj) {
console.log(i); //能迭代出原型链里面的属性，所以会打印出 b和a
}
题目3：
Object.prototype.a = 1;
var obj = {
b: undefined
};
console.log(obj.a);//1
console.log(‘b’ in obj);//true //能找到处于原型链里面的bar属性
console.log(obj.hasOwnProperty(‘a’));//false 不是自身的属性
console.log(obj.hasOwnProperty(‘b’));//true 是自身的属性
题目4：
function A(){
}
function B(a){
this.a = a;
}
function C(a){
if(a){
this.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
//实例对象都能访问构造函数的原型对象，可以明确的是以上3个都是能拿到a的
console.log(new A().a);//1 拿到的是原型上的a=1
console.log(new B().a);//undefined this.a = a;将new B()这个实例对象的a属性这是为undefined，所以拿到的是undefined
console.log(new C(2).a);//2 将new C(2)这个实例对象的a属性这是为2，所以拿到的是2
题目5：
function A () {
}
A.prototype.n = 1;
var b = new A();//b实例对象已经建立原型连接
//原型对象指向被改变，不会切断b实例对象的
A.prototype = {
n: 2,
m: 3
}
var c = new A();//c实例对象将根据新的原型建立连接
console.log(b.n, b.m); //1 undefined 这里拿到是改变prototype之前的
console.log(c.n, c.m); //2 3 这里拿到是改变prototype之后的
题目6：
var F = function(){};
Object.prototype.a = function(){
console.log(‘a’)
}
Function.prototype.b = function(){
console.log(‘b’)
}
var f = new F();
F.a(); //打印a 对象都能访问Object.prototype中的属性和方法
F.b(); //打印b F是函数，原型链 F => F.proto => Function.prototype => Function.prototype.proto => Object.prototype
f.a(); //打印a 对象都能访问Object.prototype中的属性和方法
f.b(); //报错f.b is not a function 因f是F实例对象，原型链 f=>f.proto=>F.prototype=>F.prototype.proto => Object.prototype
**总结：**在JavaScript中，对象都有__proto__属性（隐式原型），指向构造该对象的构造函数的原型，而函数Function比较特殊，它除了和其他对象一样有__proto__属性，还有自己特有的属性----prototype称之为原型对象，原型对象有一个constructor属性，该属性指回该函数。
6、this的理解
实例1（new）：
function person(name){
this.name=name;
}
var p = new person(“张三”)
console.log§;
var p1 = new person(“李四”)
console.log(p1);
通过new来创建的对象，看他们的this，从下图中可以看到分别创建了新的对象。
实例2（硬绑定 call、apply）
var person = {
name:‘person’,
sayHi:function(){
console.log(this)
}
}
var o={name:‘o1’};
person.sayHi.call(o);
看下图的this打印，这个this绑定的就是对象o
实例3（上下文对象调用）
var person = {
name:‘person’,
sayHi:function(){
console.log(this)
}
}
var o={name:‘o1’};
person.sayHi();
this打印如下图，直接绑定到person对象上
实例4（使用默认绑定）
var name=‘person’;
function sayHi(){
console.log(this)
}
sayHi();
打印的this是window
例外情况
var person = {
name:‘person’,
sayHi:function(){
console.log(this)
}
}
var o={name:‘o1’};
person.sayHi.call(null);
当用call、apply第一个参数传入null或者undefined的时候，会采用默认的绑定规则，this就指向window。
总结：
-
函数是否是用new来调用的？如果是的话this绑定新创建的对象。 var p = new Person();
-
函数是否通过call、apply来硬绑定调用的？如果是则this绑定的是指定的对象。 var p = sayHi.call(obj);
-
函数是否是被摸个上下文对象调用？如果是则this绑定这个上下文对象。 var p = obj.sayHi();
-
如果以上都不是的话，则使用默认绑定。 var p = sayHi();
箭头函数的this
箭头函数 被单独拎出来是有原因的，它是根据外层的作用域来决定 this 的，并且箭头函数的绑定是无法被修改的。
var a = 2;
var foo = () => {
console.log(this.a)
}
var obj = {
a: 4,
foo: foo
}
obj.foo() // 2
上述代码 箭头函数并没有受到隐式绑定规则的影响，所以控制台当中打印的结果为 2 。
7、数组去重
方式1：
var arr=[1,2,3,4,5,3,6,1,0];
var arr2 = [];
for(let i = 0; i < arr.length; i++) {
if(arr2.indexOf(arr[i]) == -1) { //不包含某个值则返回-1
arr2.push(arr[i]);
}
}
console.log(arr2);
这种方式的话估计大家也是最容易想到的。
方式2：
var arr=[1,2,3,4,5,3,6,1,0];
var arrSort = arr.sort();
var arr2 = [];
for(let i = 0; i< arrSort.length; i++) {
if(arrSort[i] != arrSort[i+1]) {
arr2.push(arrSort[i]);
}
}
console.log(arr2);
这种方法会导致数组被排序了，没有保持原来的顺序。
使用splice：
var arr=[1,2,3,4,5,3,6,1,0];
var len = arr.length;
for(var i = 0; i < len; i++) {
for(var j = i + 1; j < len; j++) {
if(arr[i] === arr[j]) {
arr.splice(i,1);
len–;
j–;
}
}
}
console.log(arr);
ES6的Set
var arr=[1,2,3,4,5,3,6,1,0];
let sortSet = new Set(arr);
console.log(Array.from(sortSet));
8、事件代理
9、变量提升和函数提升
变量提升
a=2;
var a;
console.log(a);
这段代码console会打印什么呢？也许是undefined，但其实会打印 2 。因为这段代码实际会被这样处理：
var a;
a=2;
console.log(a);
其中：var a;是编译，后面的两句才是执行。
再来看一段：
console.log(a);
var a=2;
它会被处理成这个样子：
var a;
console.log(a);
a=2;
同样的 var a;是编译，后面两句是执行，因为a=2赋值是在打印之后，所以这段代码会输出 undefined.。
从上面两段代码就可以知道 以var这样声明的变量，放到哪里都会在编译阶段被移动到当前作用域的最上面。
函数提升
函数的声明跟变量声明也是一样会被提升，下面看函数的实例：
hello();//执行
function hello(){//函数声明，这里可以看到声明在后，执行在前，能正常执行吗？
console.log(‘hello’);
}
我们运行这段代码，可以看到是正常输出的，也就是函数声明被提升了。
那如果我们用var 来声明函数会怎么样呢？
hello();//执行
var hello = function (){
console.log(‘hello’);
}
执行会报错：
**为什么呢？因为 var hello = function (){
console.log(‘hello’);
} 这样写的话var hello是变量声明，后面的是赋值操作，变量被提升了，赋值操作是没有被提升的，其实这段等同于这样：**
var hello;
hello();//执行
hello = function(){
console.log(‘hello’);
}
在执行的时候hello是只被声明的，它的值是undefined，所以用()来调用会出现TypeError，改成下面这样才能正常工作，想用这种方式写，需要将其放到函数执行的前面：
var hello= function(){
console.log(‘hello’);
}
hello();//执行
函数优先
hello();//执行
var hello;
function hello(){
console.log(‘log hello’);
}
hello = function(){
console.log(‘log hello1’);
}
这段代码会打印出：log hello
从结果中可以看到函数执行的时候是打印了log hello，函数执行完以后hello变量会被赋值语句替换成打印log hello1的函数，为啥？实际这段代码会被处理成这样
function hello(){
console.log(‘log hello’);
}
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
hello();//执行
函数优先
hello();//执行
var hello;
function hello(){
console.log(‘log hello’);
}
hello = function(){
console.log(‘log hello1’);
}
这段代码会打印出：log hello
从结果中可以看到函数执行的时候是打印了log hello，函数执行完以后hello变量会被赋值语句替换成打印log hello1的函数，为啥？实际这段代码会被处理成这样
function hello(){
console.log(‘log hello’);
}
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-8Wu5un5H-1710749300263)]
[外链图片转存中…(img-oI7ZNyNq-1710749300263)]
[外链图片转存中…(img-prO9lBXB-1710749300264)]
[外链图片转存中…(img-qqsT9zkZ-1710749300264)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-pYzJBSCG-1710749300264)]
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-mWjXOhbE-1710749300265)]
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
