【慕课网】JavaScript中OOP（上）

最新推荐文章于 2025-09-28 11:32:17 发布

原创最新推荐文章于 2025-09-28 11:32:17 发布 · 274 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Javascript

本文详细探讨了面向对象程序设计的核心概念，包括继承、封装、多态和抽象，重点讲解了JavaScript中prototype属性的作用及如何通过原型链实现继承。通过具体示例，展示了如何利用prototype属性向对象添加属性和方法，以及如何通过原型链访问这些属性和方法。

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

在这里插入图片描述

prototype属性与原型

在这里插入图片描述

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

函数原型继承实例

在这里插入图片描述

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.再谈原型链

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

在这里插入图片描述

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基础上新建的实例。

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

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

在这里插入图片描述

内置构造器的prototype

在这里插入图片描述

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

创建对象-new/原型链

在这里插入图片描述

4.instanceof

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

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

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

在这里插入图片描述

原型链上有的，用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;    
    };
}