局域网 手机网站建设,局域网站开发,山东企业网站建设,网站设计的步骤原型链图#xff0c;图中Parent是构造函数#xff0c;p1是通过Parent实例化出来的一个对象 前置知识 js中对象和函数的关系#xff0c;函数其实是对象的一种 函数、构造函数的区别#xff0c;任何函数都可以作为构造函数#xff0c;但是并不能将任意函数叫做构造函数图中Parent是构造函数p1是通过Parent实例化出来的一个对象 前置知识 js中对象和函数的关系函数其实是对象的一种 函数、构造函数的区别任何函数都可以作为构造函数但是并不能将任意函数叫做构造函数只有当一个函数通过new关键字调用的时候才可以成为构造函数 var Parent function(){}
var p1 new Parent();三个属性__proto__、prototype、 constructor proto、 constructor属性是对象所独有的prototype属性是函数独有的js中函数也是对象的一种那么函数同样也有属性__proto__、 constructor
prototype属性 prototype 它是函数独有的属性从图中可以看到它从一个函数指向另一个对象代表这个对象是这个函数的原型对象这个对象也是当前函数所创建的实例的原型对象。 prototype设计之初就是为了实现继承让由特定函数创建的所有实例共享属性和方法也可以说是让某一个构造函数实例化的所有对象可以找到公共的方法和属性。有了prototype我们不需要为每一个实例创建重复的属性方法而是将属性方法创建在构造函数的原型对象上prototype。那些不需要共享的才创建在构造函数中。 当我们想为通过Parent实例化的所有实例添加一个共享的属性时 Parent.prototype.name 我是原型属性所有实例都可以读取到我; 这就是原型属性当然你也可以添加原型方法。那问题来了p1怎么知道他的原型对象上有这个方法呢往下看
proto属性 __proto__属性是对象包括函数独有的。从图中可以看到__proto__属性是从一个对象指向另一个对象即从一个对象指向该对象的原型对象也可以理解为父对象。显然它的含义就是告诉我们一个对象的原型对象是谁。 上面说到Parent.prototype上添加的属性和方法叫做原型属性和原型方法该构造函数的实例都可以访问调用。那这个构造函数的原型对象上的属性和方法怎么能和构造函数的实例联系在一起呢就是通过__proto__属性。每个对象都有__proto__属性该属性指向的就是该对象的原型对象 p1.__proto__ Parent.prototype; // true __proto__通常称为隐式原型prototype通常称为显式原型那我们可以说一个对象的隐式原型指向了该对象的构造函数的显式原型。那么我们在显式原型上定义的属性方法通过隐式原型传递给了构造函数的实例。这样一来实例就能很容易的访问到构造函数原型上的方法和属性了。 我们之前也说过__proto__属性是对象包括函数独有的那么Parent.prototype也是对象那它有隐式原型么又指向谁 Parent.prototype.__proto__ Object.prototype; //true 可以看到构造函数的原型对象上的隐式原型对象指向了Object的原型对象。那么Parent的原型对象就继承了Object的原型对象。由此我们可以验证一个结论万物继承自Object.prototype。这也就是为什么我们可以实例化一个对象并且可以调用该对象上没有的属性和方法了。如 //我们并没有在Parent中定义任何方法属性但是我们可以调用 p1.toString();//hasOwnProperty 等等的一些方法 我们可以调用很多我们没有定义的方法这些方法是哪来的呢现在引出原型链的概念当我们调用p1.toString()的时候先在p1对象本身寻找没有找到则通过p1.__proto__找到了原型对象Parent.prototype也没有找到又通过Parent.prototype.__proto__找到了上一层原型对象Object.prototype。在这一层找到了toString方法。返回该方法供p1使用 当然如果找到Object.prototype上也没找到就在Object.prototype.__proto__中寻找但是Object.prototype.proto null所以就返回undefined。这就是为什么当访问对象中一个不存在的属性时返回undefined了
constructor属性 constructor是对象才有的属性从图中看到它是从一个对象指向一个函数的。指向的函数就是该对象的构造函数。每个对象都有构造函数好比我们上面的代码p1就是一个对象那p1的构造函数是谁呢我们打印一下。 console.log(p1.constructor); // ƒ Parent(){}通过输出结果看到很显然是Parent函数。我们有说过函数也是对象那Parent函数是不是也有构造函数呢显然是有的。再次打印下 console.log(Parent.constructor); // ƒ Function() { [native code] }通过输出看到Parent函数的构造函数是Function()这点也不奇怪因为我们每次定义函数其实都是调用了new Function()下面两种效果是一样的var fn1 new Function(msg,alert(msg));
function fn1(msg){alert(msg);
}那么我们再回来看下再次打印Function.constructor console.log(Function.constructor); // ƒ Function() { [native code] }可以看到Function函数的构造函数就是本身了那我们也就可以说Function是所有函数的根构造函数。到这里我们已经对constructor属性有了一个初步的认识它的作用是从一个对象指向一个函数这个函数就是该对象的构造函数。通过栗子我们可以看到p1的constructor属性指向了Parent那么Parent就是p1的构造函数。同样Parent的constructor属性指向了Function那么Function就是Parent的构造函数然后又验证了Function就是根构造函数
参考https://segmentfault.com/a/1190000021232132 # 巴斯光年
