目录
总结
需要知道哪些知识点?
1.三个对象
2.三个属性
以下都从这三个角度去进行分析
三个对象有哪三个:
1.先明确JS中,万物皆对象。
2.对象包括,构造函数(对象)、实例对象、原型(对象)
三个属性有哪三个?
1.prototype
2._ _ proto_ _
3.constructor
先看三个对象
一、构造函数(对象):
JS中声明函数的三种方式
1.function 函数名(){}声明
2.匿名函数声明 var foo = function () {}
3.构造函数声明 var foo = new Function("形参1","形参2","形参3")。任何函数都可以用
new Function 来创建
function fn1(name,age) {
console.log(`我叫${name},我今年${age}岁`);
}
fn1('小航',19)
// 定义函数的第二种方式
const fn2 = function(name,sex) {
console.log(`我叫${name},性别${sex}`);
}
fn2('小航','男')
fn3('小航','男')
// Function也是一个构造函数
// 上面的方式和下面的fn4声明函数的方式是一致的
const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')
// 当然还有箭头函数 只是写法变了 和第一种类似
const fn3 = (name, sex) => {
console.log(`我叫${name},性别${sex}`);
}
当我们用函数去创建对象时,如下Fun就是构造函数。fn()是实例对象
function Fun() {
}
var fn = new Fun()
console.log(fn.__proto__ === Fun.prototype); // true
并且知道:
1. 任何函数,上面的fn fn1 fn2 fn2都是Fun的实例,而Fun也是构造函数Function的实例,Function是JS内置的对象。
2. 看到上面一段代码,Fun.prototype指代/指向的是原型(对象,后面直接称为原型)。
我们接下来看第二个对象:
二、实例对象
function fn1(name,age) {
console.log(`我叫${name},我今年${age}岁`);
}
const obj1 = {
name: '小航',
age: '19'
}
知道以下知识点:
1. 只要用new关键字 + 构造函数生成的对象,就是实例对象
2. 即便没有用new + 关键字,而是用比如字面量创建对象,或者是函数直接 function 函数名() {} 这样声明,生成的也是实例对象,如上面代码 。
3. 记住重要的知识点:所有的实例对象都有__proto__属性,甚至可以去掉实例,改为所有的对象都有__proto__属性。
4. 知道如下代码中,fn 是构造函数Fun的实例对象,并且Fun也是构造函数Function的实例对象。
function Fun() {
}
var fn = new Fun()
得出的结论是:
1. fn实例对象的__proto__属性指向构造函数Fun的属性prototype【原型】
2. 而Fun的实例对象的__proto__属性也指向构造函数的Function的prototype【原型】 备注:在这里,prototype既是Fun的属性,而Fun.prototype也是最终的一个地方,目的地,这个目的地叫作原型对象。
// 1. fn是Fun()构造函数的实例 实例对象的__proto__属性都会指向自身构造函数的prototype属性
function Fun() {
}
var fn = new Fun()
console.log(fn.__proto__ === Fun.prototype); // true
// 2. Fun函数是Function构造函数的实例 因此Fun的__proto__和构造函数Function指向同一个地方
console.log(Fun.__proto__ === Function.prototype); // true
第一个console对应下图的序号1,第二个console对应下图的序号4
三、 原型对象:
知道知识点:
1. 所有的函数都有一个原型对象。比如函数Function,它有原型对象Function.prototype。也有说法叫Function.prototype 为 函数Function的伴生对象,意思是函数Function一创建,就有一个陪伴它一起创建的对象叫Function.prototype。而Function自己的身上,又有一个属性叫作prototype,这个属性指向了它的伴生对象。
2. 函数的原型对象身上有一个属性,叫作,constructor,它能够指回构造函数。就好像,构造函数Function通过属性prototype指向了原型对象Function.prototype,而原型对象Function.prototype通过自身的constructor属性指回去。
比如下面的,可以自行验证。
function fn() {
}
console.log(fn.prototype);
console.log(fn.prototype.constructor === fn); // true
3. 函数的原型对象身上还有一个属性,叫作__proto__属性。浏览器打印出来现在长这样,
[[Prototype]]: Object
原型当中的__proto__指向父类的原型对象prototype,比如下面的代码
下面的意思是函数Person的prototype,这是一个原型对象,它的__proto__属性指向Object父类的prototype,Function也是类似。为什么是这样?
因为既然Person.prototype和Function.prototype都叫作原型对象,都是对象,那么本质都是通过new Object创建的,都是构造函数Object的实例,因此它们也是实例对象,身上也有__proto__属性指向Object父类。
function Person() {
}
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
对应下图的序号3
记住:
Object是各个对象的根
再看三个属性:
一、prototype:
1. 记住这个属性是函数独有的
下面的代码,fn有prototype,Fun构造函数有prototype,Function下面没写出来,但是也有prototype。
看代码
var fn55 = new Function('age', 'sex', 'console.log(`今年${age}性别${sex}`)')
console.log(fn55.prototype);
console.log(fn55.__proto__ === Function.prototype); // true
注意:
1. 上面的fn55是通过new Function创建的一个函数,
2. 函数有prototype
3. 同时fn55也是通过new + Function 创建的一个实例对象, 因此也有__proto__,指向Function构造函数的prototype
看下面代码
function Fun(name, age) {
this.name = name;
this.age = age
}
var fnn = new Fun('小航', '123')
console.log(fnn.prototype); // undefined
注意上面代码:
1. 上面是通过new + Fun 创建了一个实例对象
2. 这里是通过构造函数Fun创建了一个对象fnn,而fnn并不是函数,因此并没有prototype原型对象
二、__proto__
1. 记得万物都是对象 因此万物都有__proto__
2. 构造函数的创建的实例对象,有__proto__,指向构造函数的prototype
function Person(name,age) {
this.name = name
this.age= age
}
Person.prototype.sayHello = function() {
console.log(this.name);
}
const obj1 = {
name: '小航',
age: '19'
}
const obj2 = new Object()
obj2.name = '焦迈奇'
obj2.age = '19'
console.log(obj1);
console.log(obj2);
console.log(Person.prototype);
const person1 = new Person('小红', 19)
const person2 = new Person('小明', 20)
console.log(person1.__proto__);
console.log(person2.__proto__);
console.log(Person.prototype === person1.__proto__);// true
console.log(Person.prototype === person2.__proto__);// true
console.log(Object.prototype === obj1.__proto__); // true
console.log(Object.prototype === obj2.__proto__); // true
3. 函数实例有__proto__,也指向构造函数Function
// 2. 创建函数的几种方式
// 定义函数的第一种方式
function fn1(name,age) {
console.log(`我叫${name},我今年${age}岁`);
}
fn1('小航',19)
// 定义函数的第二种方式
const fn2 = function(name,sex) {
console.log(`我叫${name},性别${sex}`);
}
fn2('小航','男')
// 或者箭头函数
const fn3 = (name, sex) => {
console.log(`我叫${name},性别${sex}`);
}
fn3('小航','男')
// 这三个函数的__proto__等于构造函数Function的prototype
// Function也是一个构造函数
// 上面的三种方式本质和下面的fn4声明函数的方式是一致的
// 定义函数的第三种方式
const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')
// console.log(Function.prototype === fn1.__proto__); // true
// console.log(Function.prototype === fn2.__proto__); // true
// console.log(Function.prototype === fn3.__proto__); // true
// console.log(Function.prototype === fn4.__proto__); // true
4. function Object和 function Function 都是构造函数Function的实例,因此也有__proto__
console.log(Object.__proto__ === Function.prototype);
// true
console.log(Function.__proto__ === Function.prototype);
// true
5. 原型对象也是对象,因此也有__proto__
function Person() {
}
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
三、constructor属性
每一个原型对象身上,才有constructor属性
function fn() {
}
console.log(fn.prototype);
console.log(fn.prototype.constructor === fn); // true
console.log(Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object);
一些更加复杂的情况
console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__=== null); // null
1. obj.__proto__指向Object.prototype
2. Object.prototype.constructor就是指向Object本身
备注:Object也是构造函数也是Function的实例对象 因此下面Object也有__proto__
3. Object.__proto__指向Function.prototype
4. Function.prototype.__proto__指向什么?这个就是[原型对象也是对象]原型对象的__proto__指向什么?指向的是父类的prototype也就是Object.prototype
5. Object.prototype指向什么,就是原型链的终点null 可以下去自行验证
原型链
原型链就是__proto__的终点
总结:
借助下面这张图,帮你再总结一下知识点
1. 什么是原型链?就是实例对象身上__proto__属性的走向,最终指向了Object.prototype.__proto__,是null值,就是原型链的终点
2. 明确三个对象,函数,实例对象,原型对象。三个属性,prototype __proto__ constructor
- 只有函数有prototype属性, 如果是对象但是不是函数,就没有prototype
- 每个实例对象都有__proto__属性,指向其构造函数的prototype,对应上图序号1
- 原型对象,可以理解为一个伴生对象,函数产生,它也一起产生,就是Fun.prototype, 他也有__proto__属性,指向父节点的prototype,就是Object.prototype,而构造函数也是一个实例对象,因此__proto__属性也有,也指向Object.prototype。
- 此外,function Object 和 function Function 也是 构造函数Function的实例对象,因此function Object 和 function Function 也有__proto__属性,也指向Function的prototype,这个可以自行验证
本文参考了,学校老师【移动商务网站开发】的视频,以及如下链接:
1. 这可能是掘金讲「原型链」,讲的最好最通俗易懂的了,附练习题! - 掘金
上面链接是三心哥的文章,结尾还有练习题
这个是练习题答案的图解链接,这位小伙伴也很赞。
【JS】图解原型链相关练习题,带你彻底搞懂原型链!!!(这可能是掘金画原型链画的最正的😃) - 掘金
2. javascript原型与原型链_田兴的博客-CSDN博客
如有转载,请说明,欢迎交流,欢迎指正。