原型与原型链的详细理解

js中的对象分为两种：普通对象object和函数对象function。

    function fn1(){};var fn2 = function(){};var fn3 = new Function();var fn4 = Function();var obj1 = new fn1();var obj2 = {};var obj3 = new Object();var obj4 = Object();console.log(typeof fn1);//functionconsole.log(typeof fn2);//functionconsole.log(typeof fn3);//functionconsole.log(typeof fn4);//functionconsole.log(typeof obj1);//objectconsole.log(typeof obj2);//objectconsole.log(typeof obj3);//objectconsole.log(typeof obj4);//object

还有就是所有的构建函数比如Function、Object、Number等等都是函数对象，这个共知的。

    //所有的构建函数都是function类型的console.log(typeof Object);//functionconsole.log(typeof Function);//functionconsole.log(typeof Number);//function

所有的这类构建函数使用new或者直接调用方式都能构建出一个新的数据类型。但是构建出来的数据有区别的。

    var o = new Object(),o1 = Object();console.log(o == o1);//falseconsole.log(o === o1);//falsevar f = new Function(),f1 = Function();console.log(f == f1);//falseconsole.log(f === f1);//falsevar a = new Array(),a1 = Array();console.log(a == a1);//falseconsole.log(a === a1);//falsevar n = new Number(),n1 = Number();console.log(n == n1);//**********************true       console.log(n === n1);//falsevar s = new String(),s1 = String();console.log(s == s1);//**********************true     console.log(s === s1);//falsevar b = new Boolean(),b1 = Boolean();console.log(b == b1);//**********************true     console.log(b === b1);//false//数据类型null/undefined是没有构造函数的

上面的例子中Object/Function/Array的对比结果都好说，因为他们构建出来的都是新的对象，对象比较是要比较根源（数据是否是同一个）。无论是使用new还是直接调用生成一个新的对象是要开辟新的空间存储的，不会和任何一个对象相等。但是对于数值类型，比较符“==”只是比较值相等，比较符"==="除了比较值以外还要比较数据类型。

我们以Number为例。new Number()构建出来的变量n是一个特殊的对象和数值类型比较的时候被当做数值类型来比较。当使用“===”的时候比较数值相等时再比较数据类型的时候是有别于其他数值类型的。

var num = new Number(0);
var str = new String(0);
var str1 = String(0);
console.log(num == str);//false
console.log(num == str1);//true
console.log(num === str1);//false

num和str都是比较特殊的对象，str1为数值类型。num和str比较实用对象比较的规则来，num和str1比较实用数值比较的规则来。

构造函数，实例，原型与原型对象之间的关系：

每创建一个函数，该函数都会自动带有一个prototype属性。该属性是一个指针，指向一个对象，该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们在js中实现继承)。原型对象上默认有一个属性constructor,该属性也是一个指针，指向其相关联的构造函数。通过调用构造函数产生的实例对象，都拥有一个内部属性prototype，指向了原型对象。其实例对象能够访问原型对象上的所有属性和方法。

三者的关系是，每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。

如上图，p1 ,p2的的实例都有Person的属性和方法，并且prototype都指向原型对象，p1\p2共享prototype原型对象的属性和方法，各自的constructor都指向Peson，这便是构造函数、实例、原型（对象）三者的关系。

普通对象是没有prototype属性的,只有隐藏属性__proto__（IE上也有该隐藏属性，但是使用obj.__proto__不能输出东西，所以建议不要使用__proto__属性）。而函数对象则两者兼有。prototype属性指向的是函数对象的原型对象，对象的__proto__属性是创建实例对象的时候对应的函数对象的原型对象。

原型链

所有的实例都有一个内部指针指向他的原型对象，并且可以访问到原型对象上的所有属性和方法。person实例对象指向了People的原型对象，可以访问People原型对象上的所有属性和方法。如果People原型对象变成了某一个类的实例aaa,这个实例又会指向一个新的原型对象AAA,那么person此时能访问aaa的实例属性和AAA原型对象上的所有属性和方法了。同理新的原型对象AAA碰巧又是另外一个对象的实例bbb,这个对象实例指向原型对象BBB，那么person就能访问bbb的实例属性和BBB原型上的属性和方法了。

当重写了Woman.prototype指向的原型对象后，实例的内部指针也发生了改变，指向了新的原型对象，然后就能实现类与类之间的继承了。

function People(){this.type='人'
}
People.prototype.showType=function(){alert(this.type);
}
function Woman(){this.sex='女';this.age=34;
}
Woman.prototype=new People();
var w=new Woman();
console.log('大家好,我的种类是:'+w.type+",我的年龄是:"+w.age+",我的性别是:"+w.sex);
//输出结果:
//大家好，我的种类是：人，我的年龄是:34，我的性格是:女
//w.type是People上面定义的type

解释一下以上代码.以上代码，首先先定义了People构造函数，通过new People()得到实例，会包含一个实例对象type和一个原型属性showType。另外定义一个Woman构造函数，然后情况发生变化，本来构造函数woman的prototype会执行Woman的原型对象，但是我们这里稍有改变，将Woman构造函数的prototype指向了People实例对象覆盖了woman的原型对象。当Woman的实例对象woman去访问type属性时，js首先在woman实例属性中查找，发现没有定义，接着去woman的原型对象上找，woman的原型对象这里已经被我们改成了People实例，那就是去People实例上去找。先找People的实例属性，发现没有type，最后去People的原型对象上去找，终于找到了。这个查找就是这么一级一级的往上查找。

原型与原型链的详细理解相关推荐

最详细的讲解 JS 原型与原型链
文章目录一. 普通对象与函数对象二. 构造函数三. 原型对象四. proto 五. 构造器六. 原型链七. Prototype 总结一. 普通对象与函数对象 JavaScript 中,万 ...
深入理解JavaScript系列（5）：强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"prototype"属性,函数对象有"prototype"属性,原型对象有&q ...
js原型和原型链_理解JS中的原型和原型链
导读:JavaScript中(JS)的原型和原型链是web前端开发面试中经常被问到的问题:同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继 ...
[我的理解]Javascript的原型与原型链
一.原型与原型链的定义原型:为其他对象提供共享属性的对象注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototype"属性.程序通过const ...
理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
真丶深入理解 JavaScript 原型和原型链（二）：原型和原型链
原文地址: https://www.jeremyjone.com/745/,转载请注明. 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系. 原 ...
原型和原型链的理解（Function,Object特例深入理解）
原型我们可以分为显式原型和隐式原型. 显式原型: 每个函数都有一个prototype属性,即显式原型(属性),它默认指向一个object空对象(称为原型对象): 而原型对象中有一个属性construc ...
JS原型与原型链详细解释
文章目录一.JS原型链简要解释二.JS原型链详细解释 1.构造函数 2.原型对象 3.`__proto__` 4.原型链总结一.JS原型链简要解释原型是function对象上的一个属性, 它 ...

原型与原型链的详细理解

原型与原型链的详细理解相关推荐

最新文章

热门文章