一、闭包
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
//闭包
/*
var local="变量";
*/
//假设上面三行代码在一个立即执行函数中
/*function test1(){
var local="变量";
function foo(){
return local;
}
}*/
//「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。
//比如：下面这个从上面函数中拿出来的就是闭包
/* var local="变量";
function foo(){
return local;
} */
//上面的闭包中的局部变量能不能在其他函数访问？---不能在其他函数访问
//有的人认为闭包是需要函数套函数，然后 return 一个函数的。
//为什么有的人认为闭包是需要函数套函数呢？
/* 因为从代码看来就是两个函数的套嵌，再将内部函数的结果返回。
但其实不是的，是因为我们需要局部变量，所以才把local变量放到了函数里面，
如果不把local变量防砸函数里就达不到闭包的目的-----将变量隐藏起来
*/
function test2(){
var local=1;
function foo(){
local=local+1;
alert(local)
return local;
}
return foo;
}
test2()//得不到局部变量local
//当test2函数return返回变量时得到初始值，
function test3(){
var local=1;
function foo(){
local=local+1;
alert(local)
return local;
}
alert(local)
return local;
}
test3();//1
//当test2函数return返回内部函数时得到的是foo()函数体
//所以我们要先得到test2返回的foo（）函数体,在去调用这个函数体
//1.第一种方法得到隐藏变量的变化值test2()();
//2.将得到的返回函数值赋值给变量，再调用变量
var func=test2();
func();
//为什么要 return foo 呢？
//为了其他函数能够访问到被修改以后的变量值
//闭包的作用---隐藏变量
//闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。
</script>
</head>
<body>
</body>
</html>二、原型、原型链
原型和原型链是JavaScript进阶重要的概念，尤其在插件开发过程中是不能绕过的知识点.
由一个例子开始说起
看看JavaScript内置对象Array来做一个数字排序得例子
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
arr1.sort(function(n1, n2) {
return n1 – n2;
});
arr2.sort(function(n1, n2) {
return n1 – n2;
});
console.log(arr1); //[0, 0, 1, 6, 8]
console.log(arr2); //[0, 0, 1, 1, 1, 6, 8]
console.log(arr1 === arr2);//false
console.log(arr1.sort === arr2.sort);//true
本例子定义了2个数组arr1和arr2，并调用sort方法排序，当两个数组排序结束之后，分别输出这俩数组的内容，控制台输出
arr1 ：[0, 0, 1, 6, 8]
arr2 ：[0, 0, 1, 1, 1, 6, 8]
我知道上诉两行输出并不会引起你的好奇和兴趣，所以这里我想让你把注意力集中输出的第3行和第4行。这里用到JavaScript严格相等操作符===来判断arr1数组和arr2数组是否相等。显然的，arr1和arr2是两个不同的数组，数组长度和元素都不一样，所以控制台输出false。第4行是判断arr1对象和arr2对象的函数sort是否是同一函数，结果输出了true。如果你学过面向对象编程语言，如C++/Java你会发现，这俩对象调用的不是实例方法，而是调用了类方法，什么意思呢？意思是数组arr1和数组arr2是俩不同的对象，但却用了公共的方法，类似于Java中的static方法。
那么JavaScript是如何做到的呢？
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//数组求和方法
arr1.getSum = function() {
var sum = 0;
for(var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr1.getSum()); //输出15
console.log(arr2.getSum());//控制台报错： Uncaught TypeError: arr2.getSum is not a function
这个例子还是定义了2个变量arr1和arr2，我只在arr1上面定义了函数getSum()，正如所期望的，对象arr1已经完成了数组的累和。但是变量arr2却报错，原因很简单，因为你的变量arr2没有getSum()方法，那么有没有解决方案，函数只定义一次，然后提供给不同的变量使用呢？答案是有的。
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//将getSum定义为原型方法
Array.prototype.getSum = function() {
var sum = 0;
for(var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr1.getSum()); //控制台输出15
console.log(arr2.getSum()); //控制台输出17
解决方案就是将实例方法定义为原型方法Array.prototype.getSum，然后对象arr1和arr2就可以共享getSum方法了。为了验证一下这俩对象是否调用了同一个方法，我们写测试代码如下：
console.log(arr1 === arr2); //false
console.log(arr1.getSum === arr2.getSum); //true
通过上面这个例子，我想你大概知道了JavaScript如何声明静态方法了，也知道第一个例子中为什么两个不同如何定义公共方法了，那么这个prototype关键字是什么呢？它有什么用么？
prototype
在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制，而是在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。
1.每个函数上面都有一个属性(prototype)指向了函数的原型对象(Person.prototype)。
function Person() { }
console.log(Person.prototype);
即使你只定义了一个空函数，也存在一个prototype的属性。
例子尽管我们什么都不做，但是浏览器已经在内存中创建了两个对象：Person(函数)和Person.prototype，其中，我们称Person为构造函数，因为我们后面要用到这个函数来new对象，Person.prototype称为Person的原型对象，简称原型。
现在我们给Person构造函数添加属性并使用new方式来创建一个Person()对象，看看浏览器内存发生了什么？
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return this.name;
}
var p1 = new Person(“SpringChang”, 22);
console.log(p1.showName());
2.每个实例上面都有一个隐式原型(proto)指向了函数的原型对象，如本例子中的p1对象有一个隐式原型也指向了Person.prototype对象。
如图所示，Person构造函数有一个隐式属性prototype指向了他的原型对象Person.prototype，而p1对象也有一个隐式属性__proto__指向了源性对象Person.prototype，而在原型上面我们定义了showName方法。
3.实例访问属性或者方法的时候，遵循以为原则：
3.1如果实例上面存在，就用实例本身的属性和方法。
3.2如果实例上面不存在，就会顺着__proto__的指向一直往上查找，查找就停止。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return “你调用的原型上面的方法”;
}
var p1 = new Person(“SpringChang”, 22);
p1.showName = function() {
return “你调用的是p2对象上面的方法”;
}
console.log(p1.showName()); //输出：你调用的是p1对象上面的方法
var p2 = new Person(“SpringChang”, 22);
console.log(p2.showName()); //输出：你调用的原型上面的方法
结合图和代码可以看到，原型上面有showName方法，p1对象也有showName方法，那么这时候p1调用的自身的showName方法，所以输出你调用的是p1对象上面的方法。而p2对象没有showName方法，这时候会顺着p2对象的__proto__属性指向的原型找找看没有有没有showName方法，结果找到了，则p2调用的原型上面的方法。如果原型上面也没有对应的方法呢？这时候它会顺着原型的原型去找对应的方法，最终找到Object对象如果还没找到则报undefined，下面我们来验证一下：
console.log(p1.showName === p2.showName); //false
console.log(p2.sex); //undefined
4.每个函数的原型对象上面都有一个constructor属性，指向了构造函数本身。
console.log(Person.prototype.constructor == Person); //true
由此，我们根据这4条规则绘制成了上述的关系图，这里我们可以看出Person的原型Person.prototype有一个属性constructor又指向Person构造函数本身。
原型链
上面我们提到，对象在寻找某一属性时，如果自身属性没找到就去他对应的原型对象去找。若在原型上面找到对应的属性则停止，否则继续去原型的原型找对应的属性，这样构成了一条原型链。上一节中Person的原型其实还有一属性__proto__，他指向了上一级Object的原型对象。
console.log(Person.prototype.__proto__ === Object.prototype); //true
这时候来了一个Object对象，它是JavaScript的顶级对象，同样也有自己的原型Object.protoype，这时候Person对象以及它的原型，Object对象已经对应的原型关系如下图所示。
将Object和Person联系起来的关键是Person.prototype的属性__proto__，它指向了Object.prototype，它将两者打通，构成一个链式关系。同时你也看到Object的prototye也指向了Object.prototype，所以console.log(Person.prototype.proto === Object.prototype)输出的额结果是true。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return “你调用的原型上面的方法”;
}
var p1 = new Person(“SpringChang”, 22);
var p2 = new Person(“CSDNER”, 23);
p2.__proto__ = null;
console.log(p1.showName());
console.log(p2.showName());
现在我们打破了p2对象的原型，它原本指向的是Person的原型，现在我们让他指向null，则控制台会报错。
Uncaught TypeError: p2.showName is not a function
现在我们再构造另一个对象Animal，然后强制修改p2的原型链，让他指向Animal的原型。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return “你调用的原型上面的方法”;
}
//定义另一个构造函数
function Aminal() {}
//在Aminal的原型上面定义方法speek方法
Aminal.prototype.showName = function(str) {
return “我是Aminal的showName”;
}
var p1 = new Person(“SpringChang”, 22);
var p2 = new Person(“CSDNER”, 23);
p2.__proto__ = Aminal.prototype; //将p2的__proto__指向Aminal的原型
console.log(p1.showName()); //你调用的原型上面的方法
console.log(p2.showName()); //我是Aminal的showName
从上面代码可以看到，p2的showName方法调用的Aminal原型上面的showName，而不再是Person原型上面的showName，如果你还对p2的showName是不是真的是Aminal的showName心存疑虑，那么再来验证一下吧。
console.log(p2.showName() === Aminal.prototype.showName()); //true
一般来说，我们不建议手动去修改某个对象的原型，这会破坏掉原来的原型链。但是原型却是JavaScript面向对象编程中相当重要的一个点，因为你可以利用它更好的封装一个类。
- 每一个构造函数都有一个原型对象
- 构造函数名称.prototype属性就可以得到构造函数对应的原型对象。
- 每一个原型对象中有2个属性constructor / __proto__
- 原型对象的constructor属性是用来得到原型对象对应的构造函数
- 原型对象的__proto__属性是用来得到原型对象的原型对象。
- Object.protoype顶级原型对象。
- 可以通过构造函数创建出实例对象【new 构造函数()】
- 每一个实例对象都有一个 __proto__属性用来得到创建当前实例对象的构造函数对应的原型对象。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
//原型
/*var arr1 = [1,0,0,,6,8];
var arr2 = [1,0,0,8,6,1,1]
arr1.sort(function(a,b){
return a-b;
})
arr2.sort(function(a,b){
return a-b;
})
console.log(arr1);//0,0,1,6,8
console.log(arr2);//0,0,1,1,1,6,8
console.log(arr2===arr1);//false
//数组arr1和数组arr2是俩不同的对象，但却用了公共的方法sort
console.log(arr1.sort === arr2.sort);//true
*/
/*var arr1=[1,0,0,6,8]
var arr2=[1,0,0,8,6,1,1]
arr1.getSum=function(){
var sum=0;
for(i=0;i<this.length;i++){
sum +=this[i]
}
return sum;
}*/
//console.log(arr1.getSum());//15
//console.log(arr2.getSum());// arr2.getSum is not a function
//arr2却报错，原因很简单，因为你的变量arr2没有getSum()方法
//数组中的这个公共的方法是怎么产生的？
//如何让arr2也具有getSum()方法？
//给arr2声明创建一个与arr1一样的getSum()方法。
//上面的解决方法虽然可以解决我们的问题，但是我们或把代码重复编写
//如何在不重复编写代码的情况下使arr2也具有getSum()方法？
//将getSum定义为原型方法
var arr1=[1,0,0,6,8]
var arr2=[1,0,0,8,6,1,1]
Array.prototype.getSum=function(){
var sum=0;
for(i=0 ;i<this.length;i++){
sum=sum+this[i];
}
return sum;
}
console.log(arr1.getSum());//15
console.log(arr2.getSum());//17
//通过上面这个例子，我想你大概知道了JavaScript如何声明公共方法了.
//将方法声明定义成原型方法。
//主要的东西就是得到原型---[构造函数名称.prototype]
prototype
//prototype是一个对象的属性，每一个对象都有prototype属性
//prototype表示对象实例和它的构造器之间建立一个链接【__proto__属性】
//属性(prototype)指向了对象的构造函数对应的原型对象。
//对象的创建
//1.字面量方式创建对象
var student={stuid:183766,stuname:"fxt",stuage:22,
getstuinfo:function(){
alert("字面量方式创建对象")
}
};
//2.构造函数创建对象
function person(id,name,age){
this.stuid=id;
this.stuname=name;
this.stuage=age;
this.getstuinfo=function(){
alert("构造函数创建对象");
}
}
//1.每个构造函数上面都有一个属性(prototype)指向了构造函数的原型对象(Person.prototype)。
//alert(Person.prototype); //[object Object]
//即使你只定义了一个空的构造函数，空的构造函数也存在一个prototype的属性。
//注意:尽管我们什么都不做，但是浏览器已经在内存中创建了两个对象：
//Person(构造函数) 和 Person.prototype(Person的原型对象[原型])
person.prototype.getname=function(){
alert(this.stuname)
}
var per1=new person(183766,"fxt",22)
//per1.getname()
//在构造函数对应的原型对象中有一个属性constructor ,这个属性是用来得到构造函数
//alert(person.prototype.constructor);//返回的是person.prototype原型对象对相应的函数
//alert(Array.prototype.constructor); //function Array() { [native code] }
//2.每个实例对象上面都有一个隐式原型(__proto__)指向了函数的原型对象。
//实例对象
//alert(per1.__proto__);//[object Object]per1这个实例对象对应的原型对象这里指向person.prototype
//alert(per1.__proto__.constructor);//直接指向person的函数这里指向的是function person( ){}
//3. 实例访问属性或者方法的时候，遵循以为原则
//3.1如果实例上面存在，就用实例本身的属性和方法
function Student(id,name,age){
this.stuid=id;
this.stuname=name;
this.stuage=age;
this.getxinxi=function(){
alert("id: "+this.stuid+"name: "+this.stuname+"age: "+this.stuage)
return this.stuage,this.stuid,this.stuname;
}
}
var stu1=new Student(183766,"ch",22)
stu1.getxinxi();//id: 183766name: chage: 22
//3.2如果实例上面不存在，就会顺着__proto__的指向一直往上查找，查找就停止。[上溯原型链]
Student.prototype.test1=function(){
alert("在原型对象中声明的方法");
}
var stu2=new Student(183667,"fxt",22)
stu2.test1();//在原型对象中声明的方法//这个就是因为实例本身没有这个方法，去找的Student原型对象中的方法
//原型链
//对象在寻找某一属性/方法时,如果对象本身没有这个属性/方法，那么就去他对应的原型对象去找。
//对象对应的原型对象中存在，就调用；
//对象对应的原型对象中不存在，那么继续去原型的原型中找对应的属性/方法
//这样构成了一条原型链.
//Object对象，它是JavaScript的顶级对象
//Object.protoype---顶级原型对象
function person1(name,age){
this.name=name;
this.age=age;
}
person1.prototype.showName=function(){
return "你调用的原型上面的方法";
}
var xin=new person1("fxt",22);
var xin1 =new person1("ch",22);
console.log(xin.showName()) ;//相当于__proto__属性得到的person1的原型对象的方法 你调用的原型上面的方法
//我们让xin1的__proto__属性的指向为null，使得它没有对应的返回的原型对象
xin1.__proto__=null;
//console.log(xin1.showName());//Uncaught TypeError: xin1.showName is not a function 原本xin1指向的是person1的原型，此时我们让他指向了null
//现在我们再构造另一个对象Animal，然后强制修改p2的原型链，让他指向Animal的原型。
//构造一个Animal函数
function Animal(){};
//创建Animal的原型对象
Animal.prototype.showName=function(){
return("我是Animal的showName")
}
var p1 =new person1("gyq",21);
var p2 =new person1("htt",23);
p2.__proto__=Animal.prototype;
console.log(p1.showName());//你调用的原型上面的方法
console.log(p2.showName());//我是Animal的showName
</script>
</head>
<body>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79858.html
