javascript中的原型和原型链以及继承

一,基本概念
1,什么是引用类型和基本类型
基本类型:Number Boolean String undefined null
引用类型:Object,Array,Date,Function
a,引用类型,都具有对象特性,即可自由扩展属性。
b,引用类型,都有一个隐式原型 proto 属性,属性值是一个普通的对象,且原型上面的constructor指向构造函数
c,引用类型,隐式原型 proto 的属性值指向它的构造函数的显式原型 prototype 属性值。
d,当你试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的隐式原型 proto(也就是它的构造函数的显式原型 prototype)中寻找。

规则b
var obj = {}
var array = []
var fn = function(){}

console.log(obj.__proto__);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(obj.__proto__.constructor)  //ƒ Object() { [native code] }
console.log(array.__proto__);//[constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]
console.log(array.__proto__.constructor) //ƒ Array() { [native code] }
console.log(fn.__proto__)//ƒ () { [native code] }
console.log(array.__proto__.constructor)  //ƒ Function() { [native code] }
//所以我们平时看见的一些方法比如操作数组的方法push,unshift或者操作对象的方法会在对象或数组的隐式原型上去找

规则c


var obj = {}  =>  var obj = new Object()
var array = []  =>  var array = new Array()
var  function = (){}  var function = new function()

console.log(obj.__proto__ === Object.prototype)  //true,因为obj是Object的实例化对象,Object是obj的构造函数,下面的同理
console.log(array.__proto__ === Array.prototype)   //true
console.log(function.__proto__ === Function.prototype )  //true
规则d

var obj = {a:'1'};
obj.toString()
//obj里面没有定义toString方法为什么可以调用呢?应为toString方法在 Object.prototype里面因为在对象里面找不到toString方法,所以去obj.__proto__里面去找,又因为obj.__proto__  === Object.prototype ,所以就找到了

二,原型和原型链
1,__proto__属性
_首先,我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的。但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor属性,

var Person = Foo(){
}
var f1 = new Foo()

在这里插入图片描述
当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存在这个属性,则继续往父对象的__proto__属性所指向的那个对象(可以理解为爷爷对象)里找,如果还没找到,则继续往上找…直到原型链顶端null,再往上找就相当于在null上取值,会报错(可以理解为,再往上就已经不是“人”的范畴了,找不到了,到此结束,null为原型链的终点),由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。,

2,prototype属性
prototype属性,它是函数所独有的,它是从一个函数指向一个对象。它的含义是函数的原型对象,也就是这个函数(其实所有函数都可以作为构造函数)所创建的实例的原型对象,由此可知:f1.proto === Foo.prototype,它们两个完全一样。那prototype属性的作用又是什么呢?它的作用就是包含可以由特定类型的所有实例共享的属性和方法,也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候,其实会默认同时创建该函数的prototype对象。

举几个简单的例子

 function Person(name){
        this.name  = name
        console.log(this.name)
    }

    var p = new Person('nick');
    p.toString()

p是Person的实例化对象,而Person的prototype上toString方法,为什么p还可以调用这个方法呢?
首先p会先在自己身上找有没有toString方法,发现没有,就会去Personprototype上去找有没有toString方法,发现也没有,而Person.prototype是一个对象,所以再找他的__proto__属性,所以就找到了 Object.prototype 下的 toString 方法。

、三,总结
1,引用类型都有一个__proto__属性,叫做该引用类型的隐式原型,该属性指向构造函数的原型对象,即p.proto === Person.prototype
2.我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性。
3__proto__属性的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到4.__proto__属性的终点null,再往上找就相当于在null上取值,会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
5.prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法,即f1.proto === Foo.prototype。
6.constructor属性的含义就是指向该对象的构造函数,所有函数(此时看成对象了)最终的构造函数都指向Function。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值