脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

主要问题:
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。//执行构造函数的一步

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

自定义函数的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__属性指向,来访问委托对象上的属性和方法,在逻辑上更简洁直观。

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过