【慕课网】JavaScript中OOP(上)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014465934/article/details/84751226

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;    
    };
}

猜你喜欢

转载自blog.csdn.net/u014465934/article/details/84751226