面向对象原型链继承知识梳理

author author     2022-09-01     443

关键词:

单例模式:就是一个对象咯

var person={
    name:xuwen,
    age:17
};
var person2={
    name:xiaoxu,
    age:25  
}

工厂模式:就是一个函数,解决批量生产问题

 1 function fn(name,age){
 2     var obj={};
 3     obj.name=name,
 4     obj.age=age,
 5     obj.write=function(){
 6         console.log(obj.name);
 7     }
 8     return obj;
 9 }
10 var person1=fn(‘xuwen‘,17);
11 var person2=fn(‘xiaoxu‘,23);
12 person1.write();
13 person2.write();

构造函数:也是一个函数,但这个函数new一下的时候,那么这个函数就会自动产生一个对象(实例),并且最后返回这个对象(实例)。里面的this指的就是当前对象(实例)。方法里面的this例外,谁调用这个方法,this就指向谁。

 1 var name=‘xuxu‘;
 2 function Fn(name,age){
 3     this.name=name;    //this指的就是当前实例
 4     this.age=age;
 5     this.write=function(){
 6         console.log(this.name);  //谁调用方法   this就指向谁
 7     }
 8 }
 9 var person1=new Fn(‘xuwen‘,17);
10 var person2=new Fn(‘xiaoxu‘,23);
11 person1.write();  //xuwen
12 person2.write();  //xiaoxu
13 var p3=person1.write;
14 p3();  //xuxu

上面构造函数有一个弊端,对于属性,每个实例不同,这个没有问题,但是方法对于每个实例都开辟一个空间来存储,那就浪费。毕竟每个方法都是一样,那么怎么解决这个问题呢?那就是下面将的原型了。

基于构造函数的原型及原型链

 1 function Fn(name,age){
 2     this.name=name;    //this指的就是当前实例
 3     this.age=age;
 4 }
 5 Fn.prototype.write=function(){    //这是一个公共的空间  每个实例调用方法直接到这里找就行   牵涉到原型链  那就讲讲吧
 6     console.log(this.name);
 7 }
 8 var person1=new Fn(‘xuwen‘,17);
 9 var person2=new Fn(‘xiaoxu‘,23);
10 person1.write();  //xuwen
11 person2.write();  //xiaoxu
12 
13 //原型链
14 //每个构造函数都有一个prototype属性  这个属性指向(值)存储着   构造函数.prototype 里面的东东
15 //每个对象(实例)都有一个__proto__属性 (顶级Object.prototype这个对象没有这个属性)  这个属性指向(值)  存储着 构造函数.prototype 里面的东东
16 //那么(当然构造函数.prototype也是一个对象,所以构造函数.prototype里面也有一个__proto__属性  那么这个属性最终都指向Object.prototype)
17 //根据这一样一级一级形成了原型链了

整完原型链那么下面就是继承了,这个子级构造函数可以获取到父级构造函数的属性和方法。这里就不细讲了继承诸多继承方法了。就直接用混合继承方法来结束这一章了。

利用  父级.call(this) 来继承父级的属性。

利用一个空函数作中介来继承原型方法

//该函数功能是实现child只继承person上prototype属性或者方法。
function extend(child, person) {
    var F = new Function();
    //当然也可以写成var F=function(){};    都是一样的   定义一个空函数而已
    F.prototype = person.prototype; //把这个空函数的prototype属性指向person原型对象  
    child.prototype = new F(); //child继承空函数的原型属性或者方法   就非常干净的继承了person上的方法或属性了
    child.prototype.constructor = child; //构造器的指向改一下,防止继承链乱序
    child.sub = person.prototype; //自定义一个属性把person的原型属性或方法保存下来。
}

function person() {

}

function child() {
    child.sub.constructor.call(this); //等同于person.call(this);
}

在另外补充一下   instanceof   用法就是   person1 instanceof Fn    判断实例是不是该构造函数下面的   除了父级构造函数   祖先构造函数也会判断true 

hasOwnProperty 用法    person1.hasOwnProperty(‘name‘)    判断  x 属性是否是person1的私有属性    不能判断原型链上    如果要判断原型链上  用  in 关键字

代码就不写了。

那就这样结束吧,明天数组和正则吧!

javascript面向对象编程高速构建继承关系之整合原型链

前面我们铺垫了非常多细节。是为了让大家更加明晰prototype的使用细节;如今能够将前面的知识整合起来,写一个函数用于高速构建基于原型链的继承关系了:functionextend(Child,Parent){ varF=function(){}; F.prototype=Parent.prototype; Child.proto... 查看详情

javascript面向对象(代码片段)

JavaScript面向对象(三)JavaScript原型链Object的原型顶层原型创建Object对象的内存图Object是所有类的父类原型链实现继承借用构造函数实现继承面向对象的三大特性:封装、继承、多态本文主要内容:利用JavaScript原... 查看详情

浅谈javascript的面向对象程序设计

  本文继续讲解JavaScript的面向对象程序设计。继承是面向对象语言中的一个基本概念,面向对象语言支持两种继承实现方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。但是在JavaScript中... 查看详情

js面向对象之原型链

...承,但是javaScript不一样,js是采用原型继承的思路来实现面向对象的。js-类在js中并没有class的概念,使用了一个函数,运行new的时候会为函数生成一个对象,对象含有隐藏的属性_proto_,这个属性的值就是对fun.prototype的引用。例... 查看详情

面向对象之笔记三--------------原型链

复习->继承原型式继承functionPerson(){}Person.prototype=父对象;varp=newPerson();p继承自父对象混入(mix,extend)functionextend(o1,o2){for(varkino2){o1[k]=o2[k];}}注意命名规则:1>一般将一个对象混入另一个对象,使用mix2>如果是当前对象的方法.是将... 查看详情

面向对象与原型链

类的声明和实例化//、类的声明varAnimal=function(){this.name=‘Animal‘;};//es6中class的声明classAnimal2{constructor(){this.name=‘Animal2‘;}}//实例化console.log(newAnimal(),newAnimal2());继承代码的抽象和代码的复用原型链继承<script>funct 查看详情

javascript面向对象--继承

1//继承:ECMAScript只支持实现继承依靠原型链来实现2//一、原型链3//先来理清下关系:4//每个构造函数都会有一个原型对象Person-->prototype5//每一个原型对象都会有一个指向构造函数的指针Person.prototype.constructor-->Person6//每一个... 查看详情

面向对象(oo)的程序设计——继承

仅支持实现继承,且主要依靠原型链来实现,不过一般会混合构造函数一起实现继承 1原型链 继承使用原型链进行传递,类似指针一层层向上指向对应原型,构成链状在使用原型链近似实现继承时,实例中的所有属性和... 查看详情

第六章面向对象的程序设计(3继承)

6.3继承许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继... 查看详情

javascript面向对象原型继承

<scripttype="text/javascript"> //原型链继承functionshape(){this.name="shape";this.showname=function(){console.log(this.name);}}functionshape_Two(){this.name=‘shape_Two‘}functionTriangle(side,height 查看详情

原型链继承

  面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。一、构造函数、原型与实例之间的关系  每创建一个函数,该函数就会自动带有一个prototype属性。该属性是个指针,指向了一个对象... 查看详情

原型和原型链—javascript面向对象高级

原型 1.原型有什么用:js是用原型来实现继承 2.原型是:每一个对象都有其原型对象__proto__,这个原型对象指向构造它的构造函数的原型属性prototype. ##一、函数和对象的关系## 1.函数是对象的一种,instanceof可以判断... 查看详情

手写一个promise(代码片段)

JS面向对象在JS中一切皆对象,但JS并不是一种真正的面向对象(OOP)的语言,因为它缺少类(class)的概念。虽然ES6引入了class和extends,使我们能够轻易地实现类和继承。但JS并不存在真实的类,JS的类是通过函数以及原型链机制模拟... 查看详情

es基础知识与高频考点梳理(代码片段)

...列表变量类型JS的数据类型分类和判断值类型和引用类型原型与原型链(继承)原型和原型链的定义继承写法作用域和闭包执行上下文this闭包是什么异步同步VS异步异步和单线程前端异步的场景ES6/7新标准的考查箭头函数moduleclassset... 查看详情

对象继承

  说到面向对象继承就要扯到原型链了,因为ECMAScript实现继承的主要方法就是原型链,JavaScript高级程序设计一书中这样写到:继承基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。1、原型链继承1function... 查看详情

浅谈javascript原型链

  在javascript中是支持面向对象编程的,讲到面向对象(ObjectOriented简称为OO)一般很容易想到继承和多态,而在javascript中呢,继承主要是靠原型链作为主要方法去实现的。其基本思想是利用原型让一个引用类型继承另一个引用... 查看详情

关于对象构造函数原型原型链继承

对象:在传统的面向过程的程序设计中,会造成函数或变量的冗余。而js中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便管理,例如:varperson1={name:"memphis",age:26,showMessage:function(){aler... 查看详情

es5中的继承(代码片段)

继承在面向对象的语言中,大多语言都支持两种继承方式:接口继承和实现继承,接口继承只继承方法签名,实现继承才继承实际的方法,ECMAScript值支持实现继承,今天我们来谈谈实现继承的几种方式原型链关于原型链的知识我们前面... 查看详情