【慕课网】JavaScript中OOP（上）

逃离我推掉我的手 2022-04-12 11:28 183阅读 0赞

**1.概念与继承**

面向对象程序设计（Object-oriented programming，OOP）是一种程序设计范型，同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性。

面向对象特点：继承、封装、多态、抽象。

prototype是JavaScript属性。

**prototype 属性使您有能力向对象添加属性和方法。**

object.prototype.name=value

function Foo(){
    	this.y = 2;
    }
    typeof Foo.prototype; // "object"
    Foo.prototype.x = 1;
    
    var obj3 = new Foo();
    obj3.y; // 2
    obj3.x; //1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**prototype属性与原型**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

Foo.prototype属性与原型，prototype是对象上的一个基本属性，Foo的原型则是这个基本属性结构上的\_proto\_属性指向（一般为object），new Foo()出来的对象原型指向Foo.prototype。

**函数原型继承实例**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

Person(name,age) 构造一个对象

person.prototype.hi=function()\{\} 为对象建立一个实例共享的方法

用new Person去实例化一个对象，构造器里的this指针就指向了构造对象的prototype对象。

子类用 Person.call(this,name,age)来继承父类

Student.prototype = Object.create(Person.prototype); //Objcet.create: 创建一个空对象，并且对象原型指向它的参数。要用这句话的原因是，如果不用Object.create，那么，为学生类建立一个prototype属性时，也同时会赋给了Person.

Student.prototype.constructor = Student; //这个不设置，那么这个constructor会指向Person

**2.再谈原型链**

针对上面代码示例的示意图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

**3.prototype属性**

Student.prototype.x = 101;
    bosn.x; //101
    
    Student.prototype = {y:2};
    bosn.y; // undefined
    bosn.x; //101
    
    var nunnly = new Student('Nunnly',3,'Class LOL KengB');
    nunnly.x; //undefined
    nunnly.y; //2

增加或删除Student.prototype上的属性会影响它所创建的实例bosn；但如果直接修改Student.prototype（Student.prototype = \{y:2\};）不会影响修改之前已经创建的实例bosn.但是Student.prototype = \{y:2\};会影响后续在Student基础上新建的实例。

**修改对象的原型不会影响已经创建过的实例，但是会影响后续创建的实例。**

**动态改变原型的属性值，会影响已经存在实例化对象的属性值。动态改变原型的属性，相应已经实例化对象的对应属性值并不会改变。新实例化对象对应属性值会改变。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

**内置构造器的prototype**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

因为第二个设置不可枚举，所以结果就是输出不了key值。

**创建对象-new/原型链**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

**4.instanceof**

new Object() instanceof Array === false //new Object()的原型链是null，所以为false
    [1,2] instanceof Array === true

右边构造器的prototype属性是否出现在左边的对象的原型链上  
右边必须是函数（不是函数会报错），左边是对象（不是的话，直接返回false）

！！！不同window或iframe间的对象类型检测不能使用instanceof

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]

原型链上有的，用instanceof就能返回true。

**5.实现继承的方式**

实现继承的方式：
    function Person() {}
    function Student() {}
     
    Student.prototype = Person.prototype;//!!!不可以这么赋值，会相互影响
    Student.prototype = new Person();//会有Person原型，但是还是会有问题,只是类还没有实例化
    Student.prototype = Object.create(Person.prototype);// 新创建一个对象，对象的原型指向Person
    ES5之才支持
     
    ES5之前
    if(!Object.create){
        Object.create = function(proto){
            function F() {}
            F.prototype = proto;
            return new F;    
        };
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220412/05b8ee2a098742fabe08f07ea4545f68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220412/d60150d962ee4b509de4feaeb27f3bfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220412/e75f95b41b1a458d85f2e80a9c9a1f80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220412/26e1a181a5aa4d85994a9effdbf8221a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220412/138971474fc6434d94fc33fc043648e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220412/8a9e465f7d594e0e8a8759da21c0afea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220412/48e9c5d24a2e4af4a2b90e091e31a6f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220412/5e5d3d5266844aae9915d3b13ee2ddc4.png