原型跟原型链 、prototype跟proto

1.原型跟原型链
每个对象都有一个原型对象,对象是以其为模板,从原型继承方法和属性。原型对象也有原型,并从中继承方法跟属性,一层一层,这种关系就是原型链。这些属性跟方法是定义在object的构造函数的prototype属性上的,而非对象实例本身。
在传统的面向对象语言中,是通过定义一个类,此后创建对象的实例,类中定义的属性跟方法都复制到实例中,而js中并不是这样复制的,而是通过在对象实例和他的构造器之间建立一个链接,(它是__proto__属性,是从构造函数的prototype属性派生的)通过上溯原型链,在构造器中找到这些属性跟方法的。
__proto__是每个实例都有的属性,prototype是构造函数的属性,new出来的实例是没有prototype属性的,只有__proto__属性,a的__proto__属性就是A的prototype属性,(A是方法,a是A的一个实例)。
constructor 属性返回对创建此对象的数组函数的引用。在构造函数上,a. _ _proto _ _.constructor === A.prototype.constructor可以访问(返回的是构造函数A)

原型跟原型链 、prototype跟proto_第1张图片

例如:在实例属性和原型属性都有一个名为name的属性,但是最后会输出实例的属性,当我们读取一个属性的时候,如果在属性实例上能找到就读取他,不会去管原型上是否有这个属性,其实就是属性的屏蔽,这个只会是屏蔽,不会去修改原型上的,原型上的值还在。

function Person(){}
//原型属性
Person.prototype.name='Deng'
var person1 = new Person()
//实例属性
person1.name = 'D'
console.log(person1.name)//D

但是如果在实例上没有找到这个属性,就会去实例的原型上找,找到就输出,找不到就继续去原型的原型上找,直到尽头,可以用hasOwnProperty方法去判断这个属性到底是原型上还是在实例上,只有在实例上才会显示true

function Person(){}
//原型属性
Person.prototype.name='Deng'
var person1 = new Person()
//实例属性
console.log(person1.name)//Deng

person1.hasOwnProperty('name')//false

原型继承

function Show(){
	this.name="run";
}

function Run(){
	this.age="20"; //Run继承了Show,通过原型,形成链条
}
Run.prototype=new Show();
var show=new Run();
console.log(show.name)//结果:run

原型链继承

function SuperType(){
    this.colors = ["红", "蓝", "绿"];
}
SuperType.prototype.Fun = function(){};
function SubType(){}
//继承了SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("黑");
console.log(instance1.colors); //["红", "蓝", "绿", "黑"]
var instance2 = new SubType();
console.log(instance2.colors); //["红", "蓝", "绿", "黑"]

优点:能通过instanceOf和isPrototypeOf的检测
注意:给原型添加方法的语句一定要放在原型替换SubType.prototype = new SuperType();之后
缺点:
(1)SuperType中的属性(不是方法)也变成了SubType的prototype中的公用属性,
如上面例子中的color属性,可以同时被instance1和instance2修改
(2)创建子类型的时候,不能像父类型的构造函数中传递参数。

组合继承

function Box(age) {
this.name = ['Lee', 'Jack', 'Hello']
this.age = age;
}
Box.prototype.run = function () {
return this.name + this.age;
};
function Desk(age) {
Box.call(this, age); //对象冒充
}
Desk.prototype = new Box(); //原型链继承
var desk = new Desk(100);
alert(desk.run());

你可能感兴趣的:(js,基础,原型模式,javascript,前端)