JavaScript学习系列之原型、原型链

简介: JavaScript学习系列之原型、原型链

原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。

1.原型

在JavaScript中,我们创建一个函数A(就是声明一个函数), 就会为该函数创建一个prototype属性。而且也会在内存中创建一个对象B,A函数的属性 prototype 指向这个对象B( 即:prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象,简称函数的原型。这个原型对象B 默认会有一个属性 constructor, constructor属性指向函数A ( 意思就是说:constructor属性的值是函数A )。

       /*
            声明一个函数,则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象,这个对象就是这个函数的原型对象,prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 执行了这个函数
    
          注意:原型对象默认只有属性:constructor。其他都是从Object继承而来,暂且不用考虑。
       */
        function Person () {
            
        }    

下面的图描述了声明一个函数之后发生的事情:

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候,那么这个对象就会存在一个默认的不可见的属性,来指向了构造函数的原型对象。 这个不可见的属性我们一般用 [[prototype]] 来表示,只是这个属性没有办法直接访问到。

 function Person () {  }    
        /*
            利用构造函数创建一个对象,则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
          var p1 = new Person();

观察下面的示意图:

1.1 小结

__proto__ 是对象实例才有的属性,指向对象的原型。
prototype 是构造函数才有的属性,该属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型
实例的__proto__属性 和 构造函数的 prototype 都指向该对象原型

这几句话能解释一切关于原型方面的问题:

当 new 一个函数的时候会创建一个对象,『函数.prototype』 等于 『被创建对象.__proto__』
一切函数都是由 Function 这个函数创建的,所以『Function.prototype === 被创建的函数.__proto__』
一切函数的原型对象都是由 Object 这个函数创建的,所以『Object.prototype === 一切函数.prototype.__proto__』

2.原型链

原型链基本思路:利用原型让一个引用类型继承另一个引用类型的属性和方法。

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数想指针(constructor),而实例对象都包含一个指向原型对象的内部指针(__proto__)。
如果让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针(__proto__),另一个原型也包含着一个指向另一个构造函数的指针(constructor)。
假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。

原型链基本思路(图解):

'__proto__'是对象的属性、'prototype'是函数的属性
null是对象原型链的终点,其值既有(是一个对象)又无(不引用任何对象),
代表着对象本源的一种混沌、虚无的状态,正与老子《道德经》中的“道”,有着同等的意义
(心中一万只艹尼玛奔腾而过,还是写java爽啊)。

在JS中,undefined是全局对象的一个属性,它的初始值就是原始数据类型undefined,并且无法被配置,也无法被改变。
undefined从字面意思上理解为“未定义”,即表示一个变量没有定义其值。

而null是一个JS字面量,表示空值,即没有对象。
与undefined相比,null被认为是“期望一个对象,但是不引用任何对象的值”,而undefined是纯粹的“没有值”。

从一张图看懂原型对象、构造函数、实例对象之间的关系

prototype:构造函数中的属性,指向该构造函数的原型对象。

constructor:原型对象中的属性,指向该原型对象的构造函数

_proto_:实例中的属性,指向new这个实例的构造函数的原型对象

3.利用原型实现继承

3.1 利用 call 借用构造函数继承

优点:实现了继承属性,但值都不相同

缺点: 无法继承父级类别中原型上的方法

function Person(name,age,sex,weight){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.weight=weight;
}
Person.prototype.sayHi=function(){
    console.log("您好")
}
 
function Student(name,age,sex,weight,score){
    //将当前实例对象传入Person 借过来使用一次来达到继承效果
    Person.call(this,name,age,sex,weight);
    this.score=score;
}
 
var stu1=new Student("小明",10,"男","10kg","100")

3.2 prototype 实现继承

利用prototype,将Student 的prototype 指向 Person 来达到继承效果,

优点:继承了父级原型上的方法

缺点: 实例化多个Student 都必须共用相同的name 和 age

// 此处
Student.prototype.constructor=Student
function Person(name,age){
        this.name=name;
        this.age=age;
     }
 
     Person.prototype.eat=function(){
        console.log("Person 吃饭")
     }
 
     function Student(num,score){
        this.num=num
        this.score=score
     }
     //继承
    Student.prototype=new Person("小红",10)
    Student.prototype.constructor=Student
 
    var stu =new Student(2016002288,80)
 
    stu.eat()//Person 吃饭

3.3 组合继承

组合继承其实就是结合了上述的两种方法来实现继承,拥有两种方法的优点

function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
     }
     Person.prototype.sayHi=function(){
        console.log("你好")
     }
 
     function  Student(name,age,sex,score){
        //借用构造函数
        Person.call(this,name,age,sex)
        this.score=score
     }
 
     // 改变了原型指向
     Student.prototype=new Person();//不传值
     Student.prototype.eat=function(){
        console.log("吃东西");
     }
 
     var stu=new Student("小黑",20,"男","100分")
     console.log(stu.name,stu.age,stu.sex,stu.score);
     stu.sayHi()//你好
     stu.eat()//吃东西

3.4 拷贝继承

类似于复制,把一个对象中的属性和方法直接复制到另一个对象中

function Person(){
    }
 
    Person.prototype.name="小红"
    Person.prototype.age=18
 
    function Student(){
    }
    
    var p=Person.prototype;
    var s=Student.prototype;
 
    for(key in p){
        s[key]=p[key]
    }
 
    console.dir(Student)

每次都要for in 好累 , 可以进行优化封装一下

function extend(Child,Parent) {
 
    var p = Parent.prototype;
    var c = Child.prototype;
 
    for (var i in p) {
      c[i] = p[i];
      }
        
        //这个属性直接指向父对象的prototype属性,可以直接调用父对象的方法,为了实现继承的完备性,纯属备用性质
    c.par = p;
 
  }

3.5 直接继承prototype

优点 : 效率比较高

缺点 : 因为相当于是个传址过程 所以修改Student的属性 Person 的也会被更改

    function Person(){};
 
    Person.prototype.name="小红";
    Person.prototype.age=18;
 
    function Student(){};
 
    Student.prototype=Person.prototype;
 
    console.dir(Student);
    console.dir(Person);
    Student.prototype.age=25;

3.6 利用空对象作中介实现继承

用这种方式修改 Student 的prototype 不会影响到 Person的prototype

function Person(){};
    Person.prototype.name="小红";
    Person.prototype.age=11;
 
    function Student(){};
    var F=function(){};
    F.prototype=Person.prototype;
 
    Student.prototype=new F();
    Student.prototype.constructor=Student;
 
    Student.prototype.age=25;
 
    console.dir(Person)
    console.dir(Student)

参考文献

https://www.cnblogs.com/wangfupeng1988/p/3977924.html

相关文章
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
30 0
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
4天前
|
JavaScript
什么是js的原型链
什么是js的原型链
|
8天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
33 0
|
1月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
1月前
|
JavaScript 前端开发
在JavaScript中,如何优化原型链的性能?
在JavaScript中,如何优化原型链的性能?
16 2
|
1月前
|
JavaScript 前端开发
谈谈对 JavaScript 中的原型链的理解。
谈谈对 JavaScript 中的原型链的理解。
16 1