欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

总结javascript基础概念(三):js对象原型链

程序员文章站 2022-04-04 20:31:55
主要问题:1、构造函数和普通函数有区别么?什么区别?2、prototype和__proto__有什么不同?3、instanceof的作用机制,为什么有限制?4、ES6的相关方法,Class继承原理? ......

 

主要问题:
1、构造函数和普通函数有区别么?什么区别?
2、prototype和__proto__有什么不同?
3、instanceof的作用机制,为什么有限制?
4、ES6的相关方法,Class继承原理?

 

三、对象与原型

 

(一)、数据类型
Js共有6种数据类型:

  5种基本数据类型 undefined,null,string,number,Boolean

  1种复杂数据类型 Object

Object 数据类型可以分为两种:

  函数(包括各种原生、自定义的构造函数):Object(),Function(),Array(),Date(),,,

  对象实例(由函数创建的):  {,,},[,,]...

 

(二)、创建对象

<script>
    var Person = function () { };
    var p = new Person();
</script>

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:
  <1> var p={}; 也就是说,初始化一个对象p。
  <2> p.__proto__=Person.prototype;
  <3> Person.call(p); 也就是说构造p,也可以称之为初始化p。//执行构造函数的一步

  说明:对象可以通过函数来创建。对象都是通过函数创建的。

总结javascript基础概念(三):js对象原型链

   每个函数都有一个prototype属性,指向一个对象,对象默认只有一个叫做constructor的属性,指向这个函数本身。

总结javascript基础概念(三):js对象原型链

  Object是最*的构造函数,prototype对象里面,就有好几个其他属性。

总结javascript基础概念(三):js对象原型链

  每个对象都有一个__proto__,可成为隐式原型。

总结javascript基础概念(三):js对象原型链

自定义函数的prototype本质上就是普通对象实例,都是被Object创建,所以它的__proto__指向的就是Object.prototype。

Object.prototype确实一个特例——它的__proto__指向的是null。

 

 (三)、instanceof

<script>
	function B(){};
	var A = new B();
	console.log(A instanceof B);
</script>

  Instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。
  Instanceof的判断队则是:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。
  所以instanceof 无法检测不同iframe创建的对象实例。

 

(四)、ES6新方法,新特性
Object.setPrototypeOf(),Object.getPrototypeOf()。新增加几个方法直接操作对象的__proto__属性,实现对象之间的联系。
Class的对象语法糖,模仿面向对象的语法,勉强提供了JS中的类的概念。然而并没有改变原型链的实质,只是更加隐藏的更深。

 

(五)、继承与委托
与纯净面向对象的语言不同,JS本质并没有类和实例的概念。JS中一切皆对象(除了少数基本类型),是真正的面向“对象”。
构造函数与普通函数并没有区别,只是调用方式不同。
与竭力模仿面向对象的方式来使用JS,使得代码继承逻辑十分复杂抽象。
相比之下,使用委托的思想,直接修改对象的__proto__属性指向,来访问委托对象上的属性和方法,在逻辑上更简洁直观。