prototype小解

Posted 2020-08-17 炎泽

prototype由来

在理解prototype前，首先得理解js面向对象编程的私有变量、私有函数，静态变量、静态函数，以及实例变量，实例函数

私有变量，私有函数

函数内部通过var定义的变量

function obj(){
    var a= 1;
    var b= function(){}
};
console.log(obj.a); //undefined
console.log(obj.b); //undefined
var o= obj();
console.log(o.a); //undefined
console.log(o.b); //undefined

这样a变量,b函数只能在函数体内部获取，外部无法获取，（无论是通过函数本身还是实例获取），所以称为私有变量

--------------------------------------------------------------------------------------------------------------------

静态变量，静态函数

函数外部通过.定义的变量(函数实质上是一种对象)

function obj(){ 
};
obj.a= 1;
obj.b= function(){};
console.log(obj.a); //1
console.log(obj.b); //function(){}
var o= new obj();
console.log(o.a); //undefined
console.log(o.b); //undefined

通过函数本身依旧能获取，但不能通过实例获取

-------------------------------------------------------------------------------------------------------------------

实例变量，实例函数

通过实例函数定义的变量，函数

function obj(){
    this.a= 1;
    this.b= function(){};
};
console.log(obj.a); //undefined
console.log(obj.b); //undefined
var o= new obj();
console.log(o.a); //1
console.log(o.b); //function(){}

不能通过实例函数获取，只能通过实例函数定义的变量获取

-------------------------------------------------------------------------------------------------------------------

总所周知，js面向对象最佳方案是通过构造函数实现（虽然通过一般函数也行），

在创建时私有变量，函数，实例变量，函数使用较多，静态变量，函数很少用，当然这只是本人的经验...

那么，进入正题，为何需要prototype？，首先请看下面的一个例子~

function obj(){
    this.a= [];
    this.b= function(){};
};
var o1= new obj();
o1.a.push(1);
var o2= new obj();
console.log(o2.a); //[]

分析：我们通过o1改变了a属性，但通过o2获取仍然不变，为何？

因为通过构造函数创建的诸个实例，是通过对此函数变量，方法的复制，彼此之间不会共享，不会互相影响

好比两人通过同一个链接下了同一部电影，其中一个修改了影片资源，那么会对另一个人造成影响么，当然不会！

那么，问题来了，当实例有几百，上千个，其变量、方法复制几百上千次，这是对资源的极大浪费！

 

prototype属性应运而生~请看下面实例

function obj(){
    this.a= [];
    this.b= function(){};
};
obj.prototype.c= [0];
obj.prototype.d= function(){
    console.log("0");
}
var o1= new obj();
o1.c.push(1);
o1.d= function(){console.log("1")};
var o2= new obj();
console.log(o2.c); //[0,1]
o2.d(); //0

c被更改了！证明变量，函数得以共享！（值得一提的是o1.d= function(){console.log("1")};无法改变通过prototype定义的函数，这是本人之前犯过的错）

这样定义可节约大量空间

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

prototype详解:

prototype与__proto__,继承链:

依旧从一小段代码开始

function obj(){
    this.a= [];
    this.b= function(){};
};
console.log(obj.prototype);

输出:

解析:

每一个我们定义的函数都有prototype属性，prototype是一个对象，内有constructor属性及__proto__属性(注意下划线长度)

然后是下面这段:

function obj(){
    this.a= [];
    this.b= function(){};
};
var o= new obj();
console.log(o.__proto__);

解析:

每一个实例皆有__proto__属性，指向其构造函数的prototype属性！

接着这个:

function obj(){
    this.a= [];
    this.b= function(){};
};
console.log(obj.prototype);
console.log(Number.prototype);
console.log(Object.prototype);

备注:当使用number，object等基本类型时，注意首字母大写，可以把他们也理解为构造函数，函数名是Number，Object等(当然只是这么理解，真实情况当然不是这样~)

发现除了Object以外，其他类型的prototype都有__proto__属性

解析:Function，Number，String等本质都是Object的实例！因此都有__proto__属性，Object是源头，自然没有~~，而这恰恰验证了js一切皆为对象的思想！

Object>基本类型>构造函数>继承构造函数...层层向下，形成继承链！

-------------------------------------------------------------------------------------------------------------------------------------------------------

constructor(构建者):

请看代码:

function obj(){
    this.a= [];
    this.b= function(){};
};
console.log(obj.prototype.constructor);

console.log(typeof obj.prototype.constructor);

输出:

function obj(){
    this.a= [];
    this.b= function(){};
};

function

解析:函数的prototype都有constructor属性，function类型，其值指向函数本身！

保险起见，为验证是否是函数本身实验以下代码:

(通过静态属性)

function obj(){
    this.a= [];
    this.b= function(){};
};
obj.c= 1;
console.log(obj.prototype.constructor.c); //1

验证成功，真是神奇~

 

当然，基本类型，包括Object都有constructor属性，

console.log(Number.prototype.constructor);
console.log(Object.prototype.constructor);

输出结果为:

function Number() { [native code] }
function Object() { [native code] }

--------------------------------------------------------------------------------------------------------------------

prototype相关方法:

isPrototypeOf 

判断一个实例是否存在于对象的原型链中

function obj(){
    this.a= 1;
};    
var o= new obj();
console.log(obj.prototype.isPrototypeOf(o));//true

注意:值得一提的是此方法只适用于自定义的函数!，不适用于基本类型

String.prototype.isPrototypeOf("aa");

Number.prototype.isPrototypeOf(1);

诸如此类都会返回false！

 

hasOwnProperty

判断实例拥有的属性是本地属性(例如 this.a)还是继承自prototype

function obj(){
    this.a= 1;
};    
obj.b= 1;
var o= new obj();
console.log(o.hasOwnProperty("a")); //true
console.log(o.hasOwnProperty("b")); //false
console.log("aaa".hasOwnProperty("length")); //true

本地属性返回true，继承自prototype返回false

此属性对基本类型有用！

 

in

判断实例是否拥有此属性（对本地属性，prototype属性皆有用）

function obj(){
    this.a= 1;
};    
obj.b= 1;
var o= new obj();
console.log("a" in o); //true
console.log("b" in o); //true
console.log("length" in "aaa"); //报错！

存在即返回true，

不可用于基本类型！