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

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

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 关键字

代码就不写了。

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

时间: 2024-10-20 09:15:02

面向对象、原型链、继承知识梳理的相关文章

JavaScript 随笔2 面向对象 原型链 继承

第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this.age=age; } 缺点:虽然可以批量创建对象,却不能知道对象的类型 只知道他是Object类型: B)构造函数 function Person(name,sex){ this.name=name; this.sex=sex; this.sayName=function(){ alert(thi

一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

原型链继承中的prototype、__proto__和constructor的关系

前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通过以下最简单的原型链继承(省略了属性和方法)来讨论: 1 function SuperType(){}; 2 function SubType(){}; //继承了SuperType 3 SubType.protoType = new SuperType(); //创建了一个SubType的实例 4

8条规则图解JavaScript原型链继承原理

原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

js原型链继承的傻瓜式详解

本文争取用最简单的语言来讲解原型链继承的OOP原理 0.如果对原型继承还没有大致了解,完全一头雾水,请先阅读 <JavaScript高级程序设计>第六章最后部分的寄生组合式继承 或者_廖雪峰js教程里面面向对象部分的原型承部分https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000 1

javascript原型链继承

一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constructor属性:每个原型对象都有一个constructor属性,这个constructor属性包含一个指向prototype属性所在函数的指针. 例如 Foo.prototype.constructor指向Foo函数.这个属性是只读的. __proto__属性(ES6通过对__proto__属性进行标

js最好的继承机制:用对象冒充继承构造函数的属性,用原型链继承 prototype 对象的方法。

js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB(sColor, sName) {//在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性 ClassA.call(th

老生常谈之JavaScript原型链继承

介绍 本文总结了ES3,ES5,ES7和NS(NonStandard)四种原型链继承的实现方法. 前言 ECMAScript 6 class将给开发者带来JavaScript OOP的规范实现,但这种方式的直接应用和普及至少得等到IE11被淘汰掉,而到那时,说不定我们已转向边沿领域了. 随着Web的快速发展,新的方法可能会随时取代旧的方法,而我们在lifetime中用过的方法,代表着一代人的记忆,又怎能忘怀? 分享 另附上BDD测试 这其中: 较新的JavaScript运行环境能兼容旧的继承方法

Javascript的原型、原型链、原型链继承

原型 在javascript中,原型分有两种:显示原型(prototype)和隐式原型(__proto__). __proto__(隐式原型) JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问.ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). prototype(显式原型) 这是函数对象特有的属性.这个属性是一个指针,指向一个对象,这

Javascript 组合继承 原型链继承 寄生继承

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca