闭包、原型、原型链究竟是什么?

本文深入探讨JavaScript中的闭包、原型和原型链概念。闭包允许函数访问并保持对外部变量的引用,常用于封装和定时器场景。原型是每个对象内置的prototype属性,作为创建对象模板。原型链则实现了对象间的属性和方法继承。通过实例解析闭包的用法及其优缺点,并展示了如何防止内存泄漏。同时,介绍了原型和原型链的工作原理,以及如何实现继承。文章最后提供了一些代码示例来巩固理解。
摘要由CSDN通过智能技术生成


前言

             在JS中关于闭包、原型、原型链到底究竟是什么?这个问题一直困扰了我好久,今天就将自己的理解与遇到的一些问题整理一下.


闭包

1、闭包是什么?

     1. 闭包就是能够读取到其他函数内部变量的函数
     2. 通俗的讲就是函数a的内部函数b,被函数a外部的一个变量引用的时候,就创建了一个闭包。

2、什么情况下会用到闭包?

     1.最常见的就是函数在封装的时候.
     2.在使用定时器的时候会用到.

3.闭包的案例

function a(){
     var i=0;  //在函数a中声明变量i
     function b(){   //在函数a中有声明了函数b
         alert(++i);    //在函数b中使用外部变量i
     }
     return b;
}
var c = a();
c();//外部的变量

4.闭包案例的变形

function a(){
     var i=0;
     function b(){        
   		 i++;
         alert(i);
     }
     return b;
}
var c = a();
c();//?
c();//?
c();//?
//应该是会依次弹出1,2,3。

// i是函数a中的一个变量,它的值在函数b中被改变,函数b每执行一次,i的值就在原来的基础上累加 1 。因此,函数a中的i变量会一直保存在内存中。

//当我们需要在模块中定义一些变量,并希望这些变量一直保存在内存中但又不会 “污染” 全局的变量时,就可以用闭包来定义这个模块。

5.闭包的用处?

 1.一个是它可以读取函数内部的变量
 2.另一个就是让这些变量的值始终保持在内存中。
var num = new Array();
for(var i=0; i<4; i++){
    num[i] = f1(i);
}
function f1(n){
     function f2(){
         alert(n);
     }
     return f2;
}
num[2]();
num[1]();
num[0]();
num[3]();

// 2 1 0 3

6.闭包的优缺点?

优点:
     1》减少全局变量    2》减少传递函数的参数量    3》封装

缺点:
	 1》使用闭包会占有内存资源,过多的使用闭包会导致内存溢出等


内存泄露的解决办法: 
      简单的说就是把那些不需要的变量,但是垃圾回收又收不走的的那些赋值为null,然后让垃圾回收走;

原型

1.什么是原型?

	1.  每个对象都会在其内部初始化一个属性,就是prototype(原型)。
	2.  通俗的说,原型就是一个模板,更准确的说是一个对象模板(类)

2.什么是原型链?

   就是利用原型让一个引用类型继承另一个引用类型的属性和方法;
   举例说明: Student → Person → Object   ,学生继承人类,人类继承对象类
function Animal(name) {
    this.name = name
}

Animal.prototype.getName = function() {
    console.log(this.name)
}

var animal1 = new Animal('Kate')
var animal2 = new Animal('Lucy')

//对象animal1 和 animal2共享方法getName
animal1.getName()
animal2.getName()
//父类:人
function Person () {
   this.head = '脑袋瓜子';
   this.emotion = ['喜', '怒', '哀', '乐']; //人都有喜怒哀乐
}
//子类:学生,继承了“人”这个类
function Student(studentID) {
    this.studentID = studentID;
    Person.call(this);
}
var stu1 = new Student(1001);
console.log(stu1.emotion); //['喜', '怒', '哀', '乐']
var A=function(){}

A.prototype.n=1

var b=new A()

A.prototype={
     n:2,
     m:3
}

var c=new A()

console.log(b.n,b.m,c.n,c.m)//多少
// 1  underfined   2   3 

//原因是b继承A,所以b.n就为1,而m在A中找不到,所以为undefined,以此类推,c继承的时候A添加了n和m,所以c.n和c.m分别是2和3;
var F=function(){};

Object.prototype.a=function(){
     console.log('a()')
};

Function.prototype.b=function(){
     console.log('b()')
}

var f=new F();

f.a()//?
f.b()//?
F.a()//?
F.b()//?

总结

以上就是今天要分享的内容。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值