Vue之JavaScript基础（闭包与原型链）

闭包

　　定义：能够访问另一个函数作用域的变量的函数。

　　作用：可以通过闭包，设计私有变量及方法

　　实例：

function outer() {
     var  a = '变量1'
     var  inner = function () {
            console.info(a)
     }
    return inner    // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}
var  inner = outer()   // 获得inner闭包函数
inner()   //"变量1"

       模拟实现c#或java中创建类的功能

(function() {
   var name = "wangyu"
   Person = function (val) {
      name = val
   }
   Person.prototype.setName = function (val) {
     name = val
   }
   Person.prototype.getName = function () {
     return name
   }     
})

var person1 = new Person('sj')
console.log(this.name)   // 输出 undefined， 因为在function作用域外不能访问
console.log(person1.getName())  // 输出sj

 

 　　容易产生的问题：

　　　　1. 引用的var定义变量可能发生变化，es6中使用let将不会有此问题

　　　　2. this的指向问题

var object = {
     name: ''object"，
     getName： function() {
        return function() {
             console.info(this.name)
        }
    }
}
object.getName()()    // underfined
// 因为里面的闭包函数是在window作用域下执行的，也就是说，this指向windows

 

　　　　3. 内存泄漏问题

function  showId() {
    var el = document.getElementById("app")
    el.onclick = function(){
      aler(el.id)   // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
    }
}

// 改成下面
function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      aler(id)   // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
    }
    el = null    // 主动释放el
}

 

原型链（简书：https://www.jianshu.com/p/08c07a953fa0）

 　　定义：每个对象都可以有一个 原型 _proto_，这个原型可以有他自己的原型，以此类推，形成一个原型链；

　　原型指针：

　　　　_prototype_：prototype属性是函数所独有的，是从一个函数指向一个对象。它的含义是函数的原型对象（也就是这个函数所创建[new]实例的原型对象）;这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）;

　　　　_proto_：_proto_是对象独有的，他总是指向 prototype（也就是指向构造函数的原型对象）；函数也会有这个属性（因为再js的宇宙里万物皆对象，包括函数），指向null

　　　　constructor：每个函数都有一个原型对象，该原型对象有一个constructor属性，指向创建对象的函数本身。

　　结论：

　　　　1. _proto_ 是原型链查询中实际使用到的，它总是指向prototype

　　　　2. prototype是函数所独有的，在定义构造函数时自动创建，他总是被 _proto_ 所指

　　

　　所有的对象都有 _proto_ 属性，函数这个特殊对象除了具有_proto_属性，还有特有的原型属性 prototype。prototype对象有 _proto_ 和 construction 属性。prototype可以给函数和对象添加可共享(继承)的方法、属性， _proto_是查找某函数或对象的原型链的方式。construction包含一个指针，指向原构造函数

　　原型链对象实例图：

　　　　　　

 

 

 

没有退路的时候，正是潜力发挥最大的时候。