【JS】原型与原型链理解


1、什么是原型

1)定义

JS中,每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( proto ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

JS中的所有引用类型(Object、Array、RegExp、Date、Function)都有__proto__属性,对于引用类型而言原型即为__proto__属性;

	var obj = {};
	console.log(obj)
	var arr =[''];
	console.log(arr)

返回结果:
举例Object、Array引用类型均有返回__proto__属性

对于JS中的所有函数,原型即为prototype原型对象。构造函数的prototype原型对象本身也自带__proto__属性,指向Object的prototype原型对象。

	function fn() {
		console.log('22')
	 }
	function Star(uname,age) {
		this.uname = uname;
		this.age = age;
	}
	console.log(fn.prototype);
	console.log(Star.prototype);

返回结果:
函数prototype原型对象返回结果如上图,可以看到prototype原型对象也包含__proto__属性

2)关系

对象的__proto__属性指向其构造函数的prototype对象

   function Star(uname,age) {
            this.uname = uname;
            this.age = age;
        }
  var per = new Star();
  console.log(per.__proto__ === Star.prototype);//true
3)原型的作用

将对象的属性和方法建立在原型这个公共区域中,即可对所有对象实现方法和属性共享,从而实现对象之间的方法与属性的继承。

     function Star(uname,age) {
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log('sing a song');
            }
        }
        var a = new Star('a',18);
        var b = new Star('b',19);
        console.log(a.sing === b.sing);//false
     function Star(uname,age) {
            this.uname = uname;
            this.age = age;
            }
        Star.prototype.sing = function()
 		{     
 			console.log('sing a song');
 		}
        var a = new Star('a',18);
        var b = new Star('b',19);
        console.log(a.sing === b.sing);//true

2、什么是原型链

1)原型链定义

在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。(摘自大佬https://github.com/ljianshu/Blog/issues/18)

2)指向关系

对象的原型属性指向其构造函数的原型对象;
构造函数的原型对象的原型属性指向Object的原型对象;
Object的原型对象的原型属性为null。
见下图。
访问链路

3)访问机制

当访问一个对象的属性或方法时,会先在对象自身里找,如果有会直接使用。如果没有会在对象__proto__属性指向的构造函数的原型对象prototype中去找,如果有会直接使用。如果还是没有,则继续往构造函数prototype的__proto__属性指向的Object的原型对象prototype里去找,如果有会直接使用,如果没有会返回undefined。


参考:
https://blog.csdn.net/xiaoermingn/article/details/80745117
https://github.com/ljianshu/Blog/issues/18
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
有不对的地方,欢迎指正。比心

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值