【 总结 】原型、原型链、构造函数

原型链

原型链就是实例对象和原型对象之间的链接
每个函数都有一个prototype属性,这个prototype属性就是我们的原型对象
通过new 构造函数出来的实例对象有一个__proto__属性,通过该属性指向他的构造函数的原型对象
这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了一条链子 就叫做原型链

构造函数

在JavaScript中,用 new 关键字来调用的函数,称为构造函数。首字母一般大写

实例对象

使用 new 调用构造函数 实例化之后 返回的对象
构造函数内部的this会指向实例对象

	 <script>
        function Food() {
            this.apple = "apple"
            this.a = 1
        }

        const food = new Food()
        console.log(food);
    </script>

在这里插入图片描述

访问原型对象

  • 构造函数.prototype
  • 实例对象.__proto__
  • Object.getPrototypeOf(实例对象)
	function Food(){
		// coding
	}
	const food = new Food()
	// 方法一
	Food.prototype
	// 方法二 (尽量不使用)
	food .__proto__
	// 方法三 (替代方法二的  推荐使用)
	Object.getPrototypeOf(实例对象)
		function Food() {
            this.apple = "apple"
            this.a = 1
        }

        // // // 修改原型对象
        Food.prototype = {
            b: 10,
            one: 1,
            two: 2,
            say() { }
        }

        var food = new Food()

        // 获取原型对象
        console.log(Food.prototype);
        console.log(food.__proto__);
        console.log(Object.getPrototypeOf(food));

在这里插入图片描述
原型链的终点是Object.prototype
在这里插入图片描述

没有修改原型对象数据

原型对象上还有一个constructor
在这里插入图片描述
构造函数的原型对象的constructor 就是构造函数本身
实例的constructor 也是构造函数本身

     console.log(Food.prototype.constructor === Food)
     console.log(foodOne.__proto__.constructor === Food)

在这里插入图片描述

更改了原型对象

需要设置一个 constructor : 构造函数 否则会导致constructor指向出错

function Food() {
	this.apple = "apple"
	his.a = 1
}
Food.prototype = {
	b: 10,
	one: 1,
	two: 2,
	say() {
	 // console.log('hello');
	}, 
	constructor: Food
}
	var food = new Food()
	console.log(foodOne.constructor);
  • 不设置constructor 会直接指向Object
    在这里插入图片描述
  • 设置了constructo
    在这里插入图片描述
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值