HTML 学习笔记 JavaScript (prototype)

Posted 2020-08-25 幻影-2000

原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html

原博客的作者是一个非常牛逼的前端大神，我作为一个初学者，在此借助大神的博客进行自己的学习。在这里感谢原作者无私的分享。也强烈建议大家到原作者的博客下学习。好了，现在让我们跟着大神的脚步前进吧。

用过javascript的人肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都有一个prototype属性，可以为其添加函数供实例访问，其他的就不清楚了，下面我们就跟着大神的脚步，来揭开其神秘的面纱吧。

每个函数都有一个prototype属性，这个属性指向一个对象的引用。这个对象称为原型对象，原型对象包含实例共享的方法和属性，也就是说将函数用作构造函数调用(使用new操作符调用)的时候，新创建的对象会从原型对象上继承属性和方法。

私有变量 函数

在具体说prototype前说几个相关的东西，可以更好的里脊prototype的设计意图。首先说一下函数的作用域，在函数內定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私有变量和私有函数。

function Obj(){
     var a=0; //私有变量
     var fn=function(){ //私有函数
                    
    }
}  

这样在函数对象obj外部无法访问的变量a和函数fn，它们就是私有的，只能在Obj内部访问，即使是函数Obj的实例也无法访问这些变量和函数。

var o=new Obj();
console.log(o.a); //undefined
console.log(o.fn); //undefined

静态变量 函数

当定义一个函数后，通过“.”为其添加函数和属性，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的函数和变量分别被称为静态函数和静态变量。

function Obj() {
    
}
Obj.a = 0;//静态变量
Obj.fn = function() {//静态函数
        
}

alert(Obj.a);//0
console.log(Obj.fn);//function

var o = new Obj();
console.log(o.a);//undefined
console.log(o.fn);//undefined

实例变量 函数

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法，实例化后可以访问，JavaScript也能做到这样。

function Obj() {
    this.a = [];//实例变量
    this.fn = function() {
        //实例方法
    }
}
console.log(typeof Obj.a);//undefined
console.log(typeof Obj.fn);//undefined


var o = new  Obj();
console.log(typeof o.a); //object
console.log(typeof o.fn);//function

这样可以达到上述目的，然而

function Obj() {
    this.a = [];//实例变量
    this.fn = function() {
        //实例方法
    }
}
var o = new Obj();
o.a.push(1);
o.fn = {};
console.log(o.a); //Array [ 1 ]
console.log(typeof o.fn);//object

var o2 = new Obj();
console.log(o2.a);//Array [  ]
console.log(typeof o2.fn);//function

上面的代码完全符合预期，但同时也说明一个问题，在o中修改了a和fn，而o2中没有改变，由于数组和函数都是对象，是引用类型，这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用。而是对Obj对象定义的属性和方法的一个复制。

这个对属性来说没有什么问题，但是对于方法来说问题就很大了，因为方法都是在做完全一样的功能，但是却又有两份复制，如果一个函数对象有上千的实例方法，那么他的实例都要保持一份上千方法的复制，这显然是不科学的，那么该怎么办呢？prototype应运而生。

prototype

无论什么时候 只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，默认情况下prototype属性会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针。

function Person(){
                
}

根据上图可以看出Person对象会自动获得prototype属性，而prototype也是一个对象，会自动获得一个constructor属性，该属性正是指向Person对象。

当调用构造器函数创建一个实例的时候，实例内部包含一个内部指针(很多浏览器这个指针名字为_proto_),指向构造函数的prototype属性，这个链接存在于实例和构造函数的prototype之间，而不是实例和构造函数之间。

function Person(name) {
    this.name = name;
}
Person.prototype.printName = function() {
    alert(this.name);
}

var person1 = new Person("tian");
var person2 = new Person("lian");

Person的实例person1中包含了name属性，同时自动生成一个_proto_属性，该属性只想Person的prototype。可以访问prototype内部的PrintName方法，大概是这个样子的

写段程序测试一下看看prototype内属性、方法是能够共享

function Person(name) {
    this.name = name;
}
Person.prototype.share = [];
Person.prototype.printName = function() {
    alert(this.name);
}

var person1 = new Person("tian");
var person2 = new Person("lian");
person1.share.push(1);
person2.share.push(2);
console.log(person2.share);//Array [ 1, 2 ]

果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。

function Person(name){
      this.name=name;
}
            
Person.prototype.share=[];

var person=new Person(\'Byron\');
person.share=0;
            
console.log(person.share); //0而不是prototype中的[]

构造简单的对象

当然prototype不是为专门为解决上面的问题而定义的，但是却解决了上面的问题。了解了这些知识就可以构建一个科学的，复用率高的对象，如果希望实例对象的属性或函数能复用就定义到prototype中，如果希望每个实例单独拥有属性或方法，则定义到this中，可以通过构造函数传递实例化参数。

function Person(name) {
    this.name = name;
}
Person.prototype.share = [];
Person.prototype.printName = function() {
    alert(this.name);
}

prototype 属性中的数据 类似于 ios中static 修饰的全局变量 只初始化一次，本文件共用，一变具变。再次感谢原博客的大神。嘿嘿。