原型对象 prototype

概念

1 我们把 JS中的对象分为 普通对象 和 函数对象
2 函数对象都有 prototype 原型属性 – Function.prototype 除外 – 普通对象没有该属性
3 所有函数都是 Function() 构造函数的实例 – Function.prototype == fn / Function.prototype.prototype == ubdefined
4 prototype 的主要作用 – 所有添加到原型对象上的属性方法, 都将被所有实例对象共享 – 就是继承
5 对象都有 proto 隐藏属性 – 主流浏览器自带的, 不是给开发者用的
6 对象都有 constructor 属性 – 属性值为该对象的构造函数或类
7 根构造器 Object – Object.prototype.hh = 777 --> 所有对象都可以访问 hh了
8 原型链 – 就是多个原型之间的特殊的访问关系
9 prototype==JS的原型对象 / proto 浏览器自带的原型对象

原型之间的关系

1 理解
	1 obj.__proto__ == obj构造器的 prototype   -- 一个对象可访问它原型链上的所有属性和方法 
	2 构造器的 __proto__ == ƒ () {
    
     [native code] }
	3 Object == 根构造器
	4 Object.prototype == 原型链的末端     // 例 -- 所有对象可以使用 toString() 的原因就是, 该方法存在于原型链的末端
	5 Object.prototype.__proto__ == null     // 说明根构造器的原型对象没有构造器

2 常见场景
	1 创建字符串 -- var str = "zhang"
	2 原型指向 -->  str.__proto__ == String.prototype
	3 原型指向 -->  String.prototype.__proto__ === Object.prototype   //记住 String这类构造器的 __proto__ 就是直接指向原型链子末端的
	4 原型指向 -->  Object.prototype.__proto__ === null

4 案例解析
	1 Object.prototype.hh = 77   -->  var str = "zhang"  --> console.log(str.hh)  // 77
	2 浏览器通过原型链查找 hh 属性过程
		1 str.hasOwnProperty('abc')   false  
		2 str.__proto__.hasOwnProperty('abc')   false
		3 str.__proto__.__proto__.hasOwnProperty('abc')   true -> 返回 hh 的属性值 66
		4 str.__proto__.__proto__ == String.prototype.__proto__ == Object.prototype

继承

1 概念

通过原型实现 JS中的继承 – prototype 的属性方法, 可被 prototype自身 实例对象 原型链 共享
.

2 继承的方式

1 构造函数继承 有局限性…
2 原型继承 不合常理…
3 拷贝继承 父子对象都会受到影响…
4 混合继承 常用的实现继承方式
5 class类继承 常用的实现继承方式

3 -- 混合继承的实现方式

猜你喜欢

转载自blog.csdn.net/weixin_46178697/article/details/112789755
今日推荐