1. 90前端首页
  2. 前端开发
  3. JavaScript

一图理解:JS原型与原型链

什么是原型

JS是一个基于对象的脚本语言,和java等面向对象语言最大不同是:
JS中没有类的概念(PS:ES6的类只是一种语法糖)

原型就好比面向对象中的 (模具),没有类,就没有对象

面向对象语言中,要先定义类才能创建对象
JS中,无须定义原型就可以直接创建对象

例子:
对象原型 -- Object.prototype
数组原型 -- Array.prototype
方法原型 -- Function.prototype

原型的创建时机与修改

  • 当函数定义的时候,原型就创建了
console.log(Person.prototype);  //已经存在

function Person(){
    this.name = \"xxx\";
}

console.log(Person.prototype);  //已经存在
  • 如果更改原型对象的属性,所有相关对象都会生效,无论是改前还是改后创建的对象
function Person(){
    this.name = \"xxx\";
}

var a = new Person();
a.age  // undefined
Person.prototype.age = 100;
var b = new Person();
a.age  // 100
b.age  // 100
  • 如果更改原型对象本身,那么在改前创建的对象,它的原型还是指向改前的原型对象,而改后创建的对象,它的原型才会指向改后的原型对象
function Person(){
    this.name = \"xxx\";
}

var a = new Person();
Person.prototype = {age:120};
var b = new Person();

a.age // undefined
b.age // 120

什么是原型链?作用是什么?

原型链就是原型与原型之间的关联

作用:用于实现继承,原型之间的继承,对象之间的继承
注意:JS内部继承的实现就是靠原型链,没有原型链就没有继承

原型链 :关系图解

一图理解:JS原型与原型链

更改原型的构造函数,对创建对象的影响

  • 原型、对象、构造函数 三者关系

一图理解:JS原型与原型链

  • 创建对象影响
其实没有影响,只不过通过对象获取的构造函数不是真实创建对象的构造函数而已

function Telephone(){}
            
function Handphone(color, bland, system) {
    this.color = color;
    this.bland = bland;
    this.system = system;
}
            
Handphone.prototype.constructor = Telephone;

var hp1 = new Handphone(\'bland\', \'iPhone\', \'IOS\');
console.log(hp1 instanceof Telephone);  // false
console.log(hp1 instanceof Handphone);   // true

注意事项

1、每个对象都有__proto__属性(指向构造函数的原型),每个函数都有__proto__属性和prototype属性
2、数组的原型(Array.prototype)是一个数组
3、方法的原型(Function.prototype)是一个方法,但这个方法很特别,它没有prototype属性
4、Object.prototype是所有对象的基类,Object.prototype.__proto__为null
5、对象只能访问(读)原型上的成员,无法操作(写)原型上的成员
6、__proto__不建议使用,可以用Object.getPrototypeOf()Object.setPrototypeOf()代替;

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021592970

展开阅读全文

发表评论

登录后才能评论