技术标签: 前端 javascript 开发语言
在一个外函数中定义了一个内函数,内函数里运用了外函数的临时变量,并且外函数的返回值是内函数的引用。这样就构成了一个闭包。
function person() {
let name = '张嘉文'
function job() {
console.log(name + '的职业是游戏主播');
}
return job() //此时job是一个闭包函数,他可以访问person这个函数内部声明的变量
}
person() //张嘉文的职业是游戏主播
理解记忆: 把person这个函数理解成一个封闭的包裹,声明的变量就是包裹里的东西,一个闭包就是person调用了一个函数job,返回给了person一个引用了person内部变量的函数,这个返回的函数就叫做闭包
1 使用不当会很容易造成内存泄露(内存中能存的东西越来越少,像是其他部分被泄露了一样)
2 设置私有变量(内部函数调用外部函数的局部变量,此时,这个局部变量就会变成内部函数的私有变量)
3 闭包的作用:充当一个摄像头,函数外部可以访问函数内部的变量,减少变量的声明,避免造成污染.
4 内存的占用比较大,浪费内存.
1).闭包可以让临时变量在外部函数声明周期结束时,仍然存在于内存之中!
/*比如说,如果你希望函数的每次执行结果,都是基于这个函数上次的运行结果*/
var Utils=(function(){
var s=10; // 内部变量
return {
a:function(){
s++;
console.log(s);
}
}
})();
Utils.a(); //11
Utils.a(); //12
2).防止变量污染,设置私有变量
var Utils=(function(){
var s=10; // 内部变量
return {
a:function(){
s++;
console.log(s);
}
}
})();
var s = 100 //全部变量
Utils.a(); //11
Utils.a(); //12
//注意:内部函数调用外部函数的局部变量,此时,这个局部变量就会变成内部函数的私有变量,会一直存在于内部函数中.即使外部函数执行完成后也不会将自己的临时变量删除,因为他发现自己的局部变量在将来可能会被内部函数使用
例题 : 使用闭包函数给每个li绑定事件,点击后立即输出当前li对应的索引,两秒后输出该li的文本内容
<ul>
<li>酸辣土豆丝</li>
<li>水煮肉片</li>
<li>鱼香肉丝</li>
<li>小炒肉</li>
<li>苹果炒香蕉</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
function data() {
var len = lis.length
for (let i = 0; i < len; i++) {
addClick(i)
}
function addClick(j) {
lis[j].onclick = function () {
console.log(j);
let _this = this
setTimeout(function () {
console.log(_this.innerHTML);
}, 2000)
}
}
}
data() //2
// 鱼香肉丝
所有函数只要创建出来,系统都会分配一个原型对象给整个函数,通过prototype找到原型对象.原型对象也有原型
我们创建的每个函数都有一个 prototype
(原型)属性。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。
1.定义:
1).原型是函数的一个属性,通过构造函数产生的实例对象,可以继承该原型上的属性和方法,原型也是对象。
2).利用原型的概念和特点可以提取公共属性和方法
3).实例化对象可通过___ _proto____查看原型
概念讲解
function Person(){
}
Person.prototype.name = '茄子' //原型上的属性
Person.prototype.say = function(){
console.log('这把我带你们赢');
} //原型上的方法
let p1 = new Person()
console.log(p1); //Person {}
console.log(p1.name); // 茄子
p1.say() //这把我带你们赢
提取构造函数中的公共属性
function Person(name,age){
this.major = '土木'
this.city = '成都'
this.name = name
this.age = age
}
//实例化对象
let stu1 = new Person()
let stu2 = new Person()
console.log(stu1) //Person {major: '土木', city: '成都', name: undefined, age: undefined}
console.log(stu2) //Person {major: '土木', city: '成都', name: undefined, age: undefined}
此时可以看出构造函数的多次创建会产生多个相同函数,造成冗余太多。
利用原型prototype解决
Person.prototype ={
major:'土木',
city:'成都'
}
let stu3 = new Person()
let stu4 = new Person()
console.log(stu3) //Person {major: '土木', city: '成都', name: undefined, age: undefined}
console.log(stu4) //Person {major: '土木', city: '成都', name: undefined, age: undefined}
实例化对象用proto访问原型
function Person(name, age) {
this.major = '土木'
this.city = '成都'
this.name = name
this.age = age
}
Person.prototype.grade = 'A'
//构造函数查看原型 prototype
console.log(Person.prototype); //{grade: 'A', constructor: ƒ}
//实例化对象访问原型
let p1 = new Person('陈同学',22)
console.log(p1.__proto__);//{grade: 'A', constructor: ƒ}
JavaScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法
构造函数、原型、实例的关系
__proto__是实例对象,拥有的指向原型的属性,而构造函数是没有的
**原型链 *绿色的线表示原型链,当zs实例调用一个属性或者方法时,现在自身找,然后一层一层的向上,直至找到null.没有则返回undefined
原型链的改造
Grand.prototype.lastName = 'Ying';
function Grand(){
}
var grondObj = new Grand();
Father.prototype = grondObj;
function Father(){
this.name="zs"
}
var fatherObj = new Father();
Son.prototype = fatherObj;
function Son(){
this.hobbit = 'smoke';
}
var sonObj = new Son();
console.log(sonObj.name); //zs
console.log(sonObj.lastName); //Ying
//当Son要访问一个属性不存在时,就会找到原型的指针__proto__,然后找到原型继续找
作用: 调用该函数,并修改函数中this的指向
**语法: ** 函数名. call(对象,实参1,实参2);
function Person(name, age) {
this.name = name;
this.age = age;
console.log(this); //Person {name: 'Ying', age: 18}
}
var personObj = new Person('Ying', 18);
let obj = {
}
Person.call(obj, 'Ying', 20);// this =>{name: 'Ying', age: 20}
列题讲解
function Animal(type) {
this.type = type
}
function Cat(name, color) {
this.name = name
this.color = color
}
let A = new Animal('猫科动物')
console.log(A); //Animal {type: '猫科动物'}
let cat1 = new Cat('小花','红色')
console.log(cat1); //Cat {name: '小花', color: '红色'}
思考:怎样让Cat继承Animal的type属性呢
用call实现
function Animal(type) {
this.type = type
}
function Cat(name, color,type) {
this.name = name
this.color = color
Animal.call(this,type)
}
let cat1 = new Cat('小花','红色','猫科动物')
console.log(cat1); //Cat {name: '小花', color: '红色', type: '猫科动物'}
作用: 调用该函数,并修改函数中this的指向
**语法: ** 函数名. apply(对象,数组);
function Animal(type) {
this.type = type
}
function Cat(name, color, type) {
this.name = name
this.color = color
Animal.apply(this, [type])
}
let cat1 = new Cat('小花', '红色', '猫科动物')
console.log(cat1); //Cat {name: '小花', color: '红色', type: '猫科动物'}
区别 : call和apply用法基本一致, 函数名.apply/call(对象, 为call是传入形参//为apply时参数以数组形式参入 )
作用: 不调用函数,克隆一个新的函数,并修改新函数中this的指向,将新的函数返回
**语法: ** 函数名. bind(对象,实参);
例 : 在fn中改变this的指向
<ul>
<li>酸辣土豆丝</li>
<li>水煮肉片</li>
<li>鱼香肉丝</li>
<li>小炒肉</li>
<li>苹果炒香蕉</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
function data() {
var len = lis.length
for (let i = 0; i < len; i++) {
addClick(i)
}
function addClick(j) {
lis[j].onclick = function () {
console.log(j);
setTimeout(function () {
console.log(this.innerHTML);
}.bind(this), 2000)
}
}
}
data() // 点击苹果炒香蕉时输出 4 两秒后输出 苹果炒香蕉
</script>
function Person(name, age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log('hello, ' + '我是' + this.name );
}
}
function Student(score){
this.score = score;
}
//这里把Person的实例对象赋值给Student的原型对象,Stu的实例对象就可以使用Person原型上的方法
Student.prototype = new Person();
var stu = new Student(100);
console.log(stu); //{score : 100}
stu.sayHello(); //hello, 我是undefined
//实例化的时候没有传值,所以才会出现这种情况
很明显,方法继承下来了,但是属性却没有继承下来
借用构造函数+原型继承
function Person(name, age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log('hello, ' + '我是' + this.name );
}
}
//父类的原型对象属性
Person.prototype.id = 10;
function Student(name, age, score){
this.score = score;
Person.call(this, name, age); //借用构造函数,继承父类模板
}
Student.prototype = new Person();
var stu = new Student('zs', 18, 100);
console.log(stu.id); //{score : 100, name : zs, age : 18}
stu.sayHello(); //hello, 我是zs
console.log('hello, ' + '我是' + this.name );
}
}
//父类的原型对象属性
Person.prototype.id = 10;
function Student(name, age, score){
this.score = score;
Person.call(this, name, age); //借用构造函数,继承父类模板
}
Student.prototype = new Person();
var stu = new Student(‘zs’, 18, 100);
console.log(stu.id); //{score : 100, name : zs, age : 18}
stu.sayHello(); //hello, 我是zs
文章浏览阅读1.2w次。背景:我们需要将一段文本存库,存库时报错:无效的 "UTF8" 编码字节顺序: 0x00java.lang.IllegalArgumentException: Null input buffer此时想到对这段文本进行转码存储。实施起来,转码过程没有问题,也能够存到数据库里了。但是从数据库中读取后,解码时还是会报错。将最开始的文本用 nodepad++ 打开,发现在本文中存在一个 Nul 字符,就是这个该死的字符引起的这一系列的问题既然转码这条路走不通,那么我们就考虑将这个字符去掉public_null input buffer
文章浏览阅读564次。运行Kodu时又发生了一个错误:有关调用实时(JIT)调试而不是此对话框的详细信息,请参见此消息的结尾。************** 异常文本 **************System.ArithmeticException: 函数不接受浮点非数字值。 在 System.Math.Sign(Single value) 在 Boku.Base.BaseChassis.App..._函数不接受浮点非数字值
文章浏览阅读4.4k次。应用中有许多数据显示要求,比如货币显示、日期时间按格式显示、销售额按大小不同颜色显示等,从技术角度来说这是同一类需求即:相同的输入值,不同的输出显示,对应jqGrid来说就是表格列的format显示,formatter的使用。参考jqgrid使用手册说明,jqgrid内置了很多formater,同时支持自定义formatter。本文讲述了jqGrid的integer, number, link, email等Predefined Formatters使用说明,即一个日期、时间自定义formatter实现。_jqgrid formatter
文章浏览阅读1.1k次。Web页面参考(HG8010F/HG8310M/HG8010H/HG8040F/HG8510/HG8540/HG8541/HG8340M)目录8.6 HYPERLINK \l "section8.6" Web页面参考(HG8010F/HG8310M/HG8010H/HG8040F/HG8510/HG8540/HG8541/HG8340M)8.6.1 HYPERLINK \l "section8..._8540m用什么使能工具
文章浏览阅读2.3k次。二叉树本来就是递归定义的,如果对递归还不是特别了解,建议看一下《001.深入浅出解释[递归]》 写一个递归函数很简单,只需要记住下面2点: 1、递归中止条件:对于二叉树来说一般是node==null的时候判断到了叶子结点 2、递归函数:;描述一个中间过程,然后用代码实现,调用自身的时候传递的参数就是你想要递归的方式。 下面的代码就是一个二叉树的创建、先中后序遍历、树的深度、左右子树的互换的过程_后序遍历交换左右子树
文章浏览阅读2.7k次。今天在部署servlet时,本以为不会有什么问题的,但是自己访问测试的时候却给我报了一个错,Class [xxx.xxx.xx.xxx] is not a Servlet,菜鸡一个的我自然只有利用网络了,上网一查,发现好多人说是因为自己的servlet没有继承HttpServlet/Servlet所导致的,这也不太可能呀,一看自己的代码果然不是这个问题,我当然继承了HttpServlet/Serv..._is not a servlet
文章浏览阅读1w次,点赞15次,收藏70次。人像静态/动态贴纸特效几乎已经是所有图像视频处理类/直播类app的必需品了,这个功能看起来复杂,实际上很简单,本文将给大家做个详细的讲解。我们先来看一下FaceU的两张效果图: 这两张效果图中, 我们可以看到一些可爱的圣诞帽贴纸和小鹿形象贴纸,在人脸区域,自动贴上不同的贴纸,便会生成很多有趣的特效,这也是大家爱不释手的原因。 我们从静态贴纸讲起,动态..._人脸贴片算法
文章浏览阅读355次。完成对yuv文件使用OpenGLShader播放_qt显示yuv图像
文章浏览阅读996次。前言:最近总在CSDN上闲逛,看到好多面试题根本就是面向Spring编程面试嘛…Spring的成功也给开发人员带来了不小的挑战,无论在架构选型,还是在日常开发中。唯有系统性地掌握Spring Framework思想、设计,以及实现,可游刃有余,以免进退失据今天扯一扯Spring到底有哪些高频面试题使用 Spring 框架能带来哪些好处?低侵入式设计,代码污染极低独立于各种应用服务器,基于Spring框架的应用,可以真正实现Write Once,Run Anywhere的承诺Spring的D_面向spring编程
文章浏览阅读3.5k次。一,前言既然你搜到了这里,说明你的DHCP服务器已经配置完毕。如果还没配置请百度下.只说关键点,不会的操作可以百度。二,准备工作1,禁用其他网卡,仅留下VMware network adapter 8 (VMware network adapter 1 禁用与否不影响)若不禁用网络,可能会从网上的DHCP服务器获得动态ip地址。 2,关闭虚拟机Windows server2003(或者其他版本_虚拟机配置dhcp怎么验证结果
文章浏览阅读7.3w次,点赞17次,收藏33次。咨询了工程师该问题因 persist 分区发生变化(重刷或清空)造成。解决方法其实很简单,就是 校准指纹_cali test result false 小米指纹
文章浏览阅读8.6k次,点赞4次,收藏7次。PB安装包,PB安装程序,PB开发工具,powerbuilder安装包,powerbuilder安装程序,powerbuilder开发工具下载地址http://yunpan.cn/Qbdd88d7Qb53W_powerbuilder6.5安装包