1、原型
1.prototype属性
function Fruit(){ }
function Apple(){ }
console.log(Fruit.prototype);// Fruit {}
console.log(Fruit.prototype.__proto__);//Object
console.log(Apple.prototype);// Apple {}
console.log(Apple.prototype.__proto__);// //Object
console.log(Fruit.prototype==Apple.prototype);//false
//由上测试可知,每个构造函数都有一个系统自带的prototype属性,
//该属性指向构造函数的原型对象。
//扩展原型方法 公有的
Fruit.prototype.show = function(){
console.log("green");
}
//原型方法可以直接调用
Fruit.prototype.show();
//Fruit.show();//undefined is not a function
//报错,构造函数中没有show方法
console.log("修改原型之前");
var banner = new Fruit();
banner.show();//green
var obj = new Object();
obj.show = function(){
console.log("orange");
}
console.log("修改原型之后");
Fruit.prototype = obj;//原型指向另一个对象了。
var banner1 = new Fruit();
banner1.show();//orange
banner.show();//green
每个构造函数都有一个系统自带的prototype属性,该属性指向构造函数的原型对象。
2.construction属性、proto属性
function Fruit(){
//对象私有 内部var 定义
}
//原型公有的属性
Fruit.prototype.water = true;
Fruit.prototype.name = "水果";
Fruit.prototype.eated = function(){
console.log(this.name+"可以吃哦");
}
console.log(Fruit);
//function Fruit(){}
console.log(Fruit.prototype);
//Fruit {water: true, name: "水果", eated: function}
console.log(Fruit.prototype.__proto__);
//Object {}
constructor属性:每个原型对象都有一个constructor属性,
constructor属性指向的是该原型对象所在的构造函数。
console.log(Fruit.prototype.constructor);
// function Fruit(){//对象私有 内部var 定义}
console.log(Fruit.prototype.constructor==Fruit);//true
var a = new Fruit();
console.log(a);
//Fruit {water: true, name: "水果", eated: function}
console.log(a.__proto__);
//Fruit {water: true, name: "水果", eated: function}
console.log(Fruit.prototype);
//Fruit {water: true, name: "水果", eated: function}
console.log(a.__proto__ == Fruit.prototype);//true
console.log(a.__proto__.constructor);
//function Fruit(){//对象私有 内部var 定义}
var obj = new Object();//等价于var obj = { };
obj.show = function(){
console.log("new Prototype");
}
console.log(obj);//Object {show: function}
console.log(obj.__proto__);// Object {}
console.log(obj.show);
//function (){console.log("new Prototype");}
console.log(obj.show.prototype);// obj.show {}
Fruit.prototype = obj;
var b = new Fruit();
console.log(b.__proto__);//Object {show: function}
console.log(b.__proto__.__proto__);//Object {}
console.log(b.__proto__ == obj);//true
b.show();// new Prototype
Fruit.prototype.constructor = Fruit;
var c = new Fruit();
console.log(c.__proto__);
//Fruit {show: function, constructor: function}
console.log(c.__proto__.constructor);
//function Fruit(){//对象私有 内部var 定义}
console.log(c.__proto__.__proto__);// Object {}
c.show();//new Prototype
由上可知:
万物皆对象!所以任何函数都是一个对象,每个对象都会包含一个prototype属性,该属性指向构建函数的原型对象。而且每个原型对象都有一个constructor属性,constructor属性指向该函数的构造函数。
每个对象里面都有一个包含创建该对象的时候指向原型对象的proto属性
2、原型链
访问对象里面的属性的规则(原型链):
先在对象自身寻找,找不到去原型找,原型找不到去原型的原型上去找,直到找到Object.prototype为止。如果Object.prototype也没有则报错。
实例1)
function Animal(){ }
Animal.prototype.say = function(){
console.log("我是动物");
}
function MaoKe(){ }
MaoKe.prototype.say = function(){
console.log("我是猫科动物");
}
function Lion(){ }
Lion.prototype.say = function(){
console.log("我是狮子");
}
var shiziwang = new Lion();
console.log(Lion.prototype);//Lion
console.log(shiziwang.__proto__);//Lion
console.log(shiziwang.__proto__ == Lion.prototype);//true
Lion.prototype = MaoKe.prototype;
console.log(shiziwang);
//shiziwang是在更换原型对象之前定义的,所以这里的还是原来的
console.log(shiziwang.__proto__);//Lion {say: function}
//对象里面都有一个包含创建对象的时候指向原型对象的属性__proto__
shiziwang.say();//我是狮子
console.log(Lion.prototype);//Maoke
shiziwang = new Lion();
console.log(shiziwang);//Lion {say: function}
console.log(shiziwang.__proto__);//MaoKe {say: function}
shiziwang.say();//我是猫科动物
实例2)
function Animal(){}
function MaoKe(){}
function Lion(){}
Animal.prototype.say = function(){
console.log("我是动物");
}
MaoKe.prototype.say = function(){
console.log("我是猫科动物");
}
Lion.prototype = new MaoKe();
//创建一个猫科对象赋值给狮子的原型
Lion.prototype.say = function(){
//这里Lion.prototype.say实际上是覆盖了MaoKe.prototype.say
console.log("我是狮子");
}
console.log(Lion.prototype);//MaoKe {say: function}
var shizi = new Lion();
console.log(shizi.__proto__);//MaoKe {say: function}
console.log(shizi.__proto__ == Lion.prototype);//true
console.log(shizi.__proto__.say);
//function (){console.log("我是狮子");}
console.log(shizi.__proto__.say.prototype);//Lion.say
shizi.say();// 我是狮子
实例3)
function Animal(){}
function MaoKe(){}
function Lion(){}
Animal.prototype.say = function(){
console.log("我是动物");
}
MaoKe.prototype = new Animal();
MaoKe.prototype.say = function(){
console.log("我是猫科动物");
}
Lion.prototype = new MaoKe();
Lion.prototype.say = function(){
console.log("我是狮子");
}
console.log(Lion.prototype);//MaoKe
console.log(MaoKe.prototype);//Animal
console.log(Animal.prototype);//Animal
var shizi = new Lion();
console.log(shizi.__proto__);//MaoKe
shizi.say();//我是狮子
delete Lion.prototype.say;
shizi.say();// 我是猫科动物
delete MaoKe.prototype.say;
shizi.say();// 我是动物
delete Animal.prototype.say;
shizi.say();// undefined is not a function
网友评论