转自: 最详尽的 JS 原型与原型链终极详解,没有「可能是」
1、普通对象和函数对象
- object和function是js自带的函数对象
- 凡是通过new function()创建的是函数对象,其余的是普通对象
f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object
2、构造函数
实例的构造函数属性(constructor)指向构造函数。
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } //两个Person的实例,每个实例都有一个constructor的属性,指向Person var person1 = new Person('Zaxlct', 28, 'Software Engineer'); var person2 = new Person('Mick', 23, 'Doctor');
person1 和 person2 都是 Person 的实例
3、原型对象
- 原型对象就是 Person.prototype,其实只是一个普通对象
- 默认情况下,所有的原型对象都会自动获得一个constructor属性,这个属性是一个指针,指向prototype属性所在的函数Person
- Person.prototype.constructor == Person
原型对象(Person.prototype)是 构造函数(Person)的一个实例。
每个对象都有proto 属性,但只有函数对象才有 prototype 属性
- js中,每当定义一个对象(函数也是对象)时,对象中都会包含一些预定义的属性。
- 其中每个函数对象都有一个prototype属性。这个属性指向函数的原型对象。
//构造函数 function Person() {} //设置原型属性 Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = function() { alert(this.name); } //实例 var person1 = new Person(); person1.sayName(); // 'Zaxlct' var person2 = new Person(); person2.sayName(); // 'Zaxlct' console.log(person1.sayName == person2.sayName); //true
。。
function Person(){};//构造函数 console.log(Person.prototype) //Person{},因为Person.prototype是Persosn的实例 console.log(typeof Person.prototype) //Object,原型对象就是一个普通对象 console.log(typeof Function.prototype) // Function,这个特殊,它是函数对象,但是没有prototype属性 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined
原型对象的作用
用于继承。
var Person = function(name){ this.name = name; // tip: 当函数执行时这个 this 指的是谁? }; Person.prototype.getName = function(){ return this.name; // tip: 当函数执行时这个 this 指的是谁? } var person1 = new person('Mick'); person1.getName(); //Mick
两次 this 在函数执行时都指向 person1。
proto
- JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做proto 的内置属性,用于指向创建它的构造函数的原型对象。
- 对象 person1 有一个 proto属性,创建它的构造函数是 Person,构造函数的原型对象是 Person.prototype ,所以:
person1.proto == Person.prototypePerson.prototype.constructor == Person; person1.__proto__ == Person.prototype; person1.constructor == Person;
这个连接存在于实例(person1)与构造函数(Person)的原型对象(Person.prototype)之间,而不是存在于实例(person1)与构造函数(Person)之间。
构造器
创建一个对象:
var obj = {}
它等同于下面这样:
var obj = new Object()obj 是构造函数(Object)的一个实例。所以:
obj.constructor === Object
obj.proto === Object.prototype新对象 obj 是使用 new 操作符后跟一个构造函数来创建的。构造函数(Object)本身就是一个函数(就是上面说的函数对象),它和上面的构造函数 Person 差不多。只不过该函数是出于创建新对象的目的而定义的。所以不要被 Object 吓倒。
//可以构造函数来创建 Array、 Date、Function var b = new Array(); b.constructor === Array; b.__proto__ === Array.prototype; var c = new Date(); c.constructor === Date; c.__proto__ === Date.prototype; var d = new Function(); d.constructor === Function; d.__proto__ === Function.prototype;
检测:
函数对象
所有函数对象的proto都指向Function.prototype
Number.__proto__ === Function.prototype // true Number.constructor == Function //true Boolean.__proto__ === Function.prototype // true Boolean.constructor == Function //true String.__proto__ === Function.prototype // true String.constructor == Function //true // 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身 Object.__proto__ === Function.prototype // true Object.constructor == Function // true // 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身 Function.__proto__ === Function.prototype // true Function.constructor == Function //true Array.__proto__ === Function.prototype // true Array.constructor == Function //true RegExp.__proto__ === Function.prototype // true RegExp.constructor == Function //true Error.__proto__ === Function.prototype // true Error.constructor == Function //true Date.__proto__ === Function.prototype // true Date.constructor == Function //true
所有的构造器都来自于 Function.prototype,甚至包括根构造器Object及Function自身。所有构造器都继承了·Function.prototype·的属性及方法。如length、call、apply、bind
console.log(Function.prototype.proto === Object.prototype) // true
这说明所有的构造器也都是一个普通 JS 对象,可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法:toString、valueOf、hasOwnProperty等。
最后Object.prototype的proto是谁?
Object.prototype.proto === null // true
属性与方法
Object.getOwnPropertyNames
获取所有(包括不可枚举的属性)的属性名不包括 prototy 中的属性,返回一个数组
var arrayAllKeys = Array.prototype; // [] 空数组 // 只得到 arrayAllKeys 这个对象里所有的属性名(不会去找 arrayAllKeys.prototype 中的属性) console.log(Object.getOwnPropertyNames(arrayAllKeys)); /* 输出: ["length", "constructor", "toString", "toLocaleString", "join", "pop", "push", "concat", "reverse", "shift", "unshift", "slice", "splice", "sort", "filter", "forEach", "some", "every", "map", "indexOf", "lastIndexOf", "reduce", "reduceRight", "entries", "keys", "copyWithin", "find", "findIndex", "fill"] */
Array.prototype 继承了对象的所有方法,当你用num.hasOwnPrototype()时,JS 会先查一下它的构造函数 (Array) 的原型对象 Array.prototype 有没有有hasOwnPrototype()方法,没查到的话继续查一下 Array.prototype 的原型对象 Array.prototype.proto有没有这个方法。