JavaScript的原型和原型链必备理解

原型原型链

重要知识点

  • 所有对象都是通过new 函数创建
  • 所有的函数也是对象 new Function()
  • 函数中可以有属性 Array.from
  • 所有对象都是引用类型

定义:

原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产
生的对象,可以继承该原型的属性和方法。原型也是对象。

原型 prototype

所有函数都有一个属性:prototype,称之为函数原型

默认情况下,prototype是一个普通的Object对象

默认情况下,prototype中有一个属性,constructor,它也是一个对象,它指向构造函数本身。

隐式原型 proto


所有的对象都有一个属性:proto,称之为隐式原型

默认情况下,隐式原型指向创建该对象的函数的原型。

当访问一个对象的成员时:

  1. 看该对象自身是否拥有该成员,如果有直接使用
  2. 在原型链中依次查找是否拥有该成员,如果有直接使用

猴子补丁:在函数原型中加入成员,以增强起对象的功能,猴子补丁会导致原型污染,使用需谨慎。

原型链

重点理解下这个图就行了:

特殊点:

  1. Function的proto指向自身的prototype
  2. Object的prototype的proto指向null

来几个常见的面试题

1.
var F = function () {
   }
Object.prototype.a = function () {
   }
Function.prototype.b = function () {
   }

var f = new F();

console.log(f.a, f.b, F.a, F.b);
// fn undefined fn fn

2.
function A() {
   }
function B(a) {
   
    this.a = a;
}
function C(a) {
   
    if (a) {
   
        this.a = a;
    }
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a); //1
console.log(new B().a); //undefined
console.log(new C(2).a); //2


3. function User() {
   }
User.prototype.sayHello = function() {
   }

var u1 = new User();
var u2 = new User();

console.log(u1.sayHello === u2.sayHello); //true
console.log(User.prototype.constructor); //User Function
console.log(User.prototype === Function.prototype); // false
console.log(User.__proto__ === Function.prototype); // true
console.log(User.__proto__ === Function.__proto__); // true
console.log(u1.__proto__ === u2.__proto__);  // true
console.log(u1.__proto__ === User.__proto__); // false
console.log(Function.__proto__ === Object.__proto__); // true
console.log(Function.prototype.__proto__ === Object.prototype.__proto__); // false
console.log(Function.prototype.__proto__ === Object.prototype); // true
全部评论

相关推荐

在校生实习:我觉得平时学校肯定有各种大作业吧。包装一下写项目里。特长那块喧宾夺主了,项目肯定是大头。特长里比如:熟悉vscode,这个感觉不具有吸引性。简要介绍你会什么语言,什么工具等就行了。同26找实习,我是个超级菜鸡😭大家一起加油
点赞 评论 收藏
分享
10-21 23:48
蚌埠坦克学院
csgq:可能没hc了 昨天一面完秒挂
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务