prototype小解

时间:2024-10-09 13:03:03

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属性,prototype是一个对象,内有constructor属性及__proto__属性(注意下划线长度)

然后是下面这段:

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

prototype小解

解析:

每一个实例皆有__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等(当然只是这么理解,真实情况当然不是这样~)

prototype小解

发现除了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,

不可用于基本类型!