js继承

javaSrcript继承

最后都变了- 提交于 2020-03-09 13:18:53
1.什么是继承 使用继承的好处:代码复用,代码抽象 举个例子:classA,classB,classA中有一个方法,classB中也有一个方法,我们想使用classA,classB中的方法,如果不使用 继承,只能在classA中定义classB中的方法,或在classB中定义classA的方法,这样代码比较囊肿 继承可以解决,classA继承classB,classA就拥有了classB中的方法,方法直接copy给classA,这样就实现了继承 换句话:继承就是一种类与类之间的复制 在java中继承会用class关键字,但在es6以前并没class的概念,只有对象,es6引入了class关键字,但实际运用的还是原型链。 js继承就是对象拥有另一个对象的属性与方法,反观类,就是子类拥有父类的属性与方法, 由此我们联想到封闭一个函数实现简单的继承: var obj = { name : "extend" } ; var obj1 = { age : 20 } function extend ( original , target ) { for ( var prop in original ) { if ( original . hasOwnProperty ( prop ) ) { target [ prop ] = original [ prop ] ; } } return

Django继承HTML模板

核能气质少年 提交于 2020-03-04 13:12:08
Django在渲染模板的过程中可以实现模板样式的继承,以减少重复的代码 1.extend继承 模板.html:   模板内容   {{% block name1 %}} {{% enfblock %}}  #name1为标识符   模板内容 继承.html:   {% extends '模板.html' %}        #先声明要继承的模板   {% block name1 %}           #注意标识符(name1)要统一     其他内容   {% enfblock %} 2.css以及js继承技巧:   在模板中可以额外添加block,方便子模块写独立的css和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板继承</title> </head> <style></style> {% block css %} {% endblock %} <body> </body> <script></script> {% block js %} {% endblock %} </html> View Code 3.include继承:一般用于循环继承多个   {% include "tag.html" %} extend继承只能继承一个 include继承可以继承多个 来源:

js继承

自闭症网瘾萝莉.ら 提交于 2020-02-27 12:25:36
js继承 首先,我们应该理解,什么是继承?所谓继承,通俗讲,就是从某人处得到某些东西,大部分情况下都是儿子从父亲那继承。现在网上也有一句玩笑,叫“你想笑死我,然后继承我的蚂蚁花呗吗”。 js中的继承,同样也可以理解为上述意思,即从子从父那获取属性和方法。 在这里,我们介绍一下使用构造函数继承和prototype继承 1.构造函数继承 此方法是通过使用call或者apply将子构造函数中的this指向变为父构造函数,但是其缺点是父对象中的属性和方法并没有继承。 代码实现: function Computer(name, type) { this.name = "电脑"; this.type = "电器"; } function Dell(name, type, color) { Computer.call(this,name,type); this.color = color; } var dell1 = new Dell('blue'); alert(dell1.name);//=>电脑 上述代码,通过call方法使得Dell继承了Computer的name和type。在输出子构造函数Dell的构造对象的name时,结果为“电脑”。 2.prototype继承 此方法主要是通过构造函数的prototype属性,将父构造函数构造的对象作为子构造函数的原型

6种JavaScript继承方式及优缺点

最后都变了- 提交于 2020-02-26 18:37:44
友情提示: 想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念 第一种:原型链继承 利用原型链的特点进行继承 function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(){}; Son.prototype = new Parent(); son1 = new Son(); son1.Say(); 以上例子解释: ①创建一个叫做Parent的构造函数,暂且称为父构造函数,里面有两个属性name、type ②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法 ③创建一个叫做Son的构造函数,暂且称为子构造函数 ④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象,即子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法 ⑤对Son构造函数进行实例化,结果赋值给变量son1,即son1为实例化对象,同样拥有2个属性和1个方法 ⑥输出son1的Say方法,结果为"web前端" 优点:可以实现继承 缺点: ①因为Son.prototype

js继承

橙三吉。 提交于 2020-02-22 23:37:40
js继承 首先,我们应该理解,什么是继承?所谓继承,通俗讲,就是从某人处得到某些东西,大部分情况下都是儿子从父亲那继承。现在网上也有一句玩笑,叫“你想笑死我,然后继承我的蚂蚁花呗吗”。 js中的继承,同样也可以理解为上述意思,即从子从父那获取属性和方法。 在这里,我们介绍一下使用构造函数继承和prototype继承 1.构造函数继承 此方法是通过使用call或者apply将子构造函数中的this指向变为父构造函数,但是其缺点是父对象中的属性和方法并没有继承。 代码实现: function Computer ( name , type ) { this . name = "电脑" ; this . type = "电器" ; } function Dell ( name , type , color ) { Computer . call ( this , name , type ) ; this . color = color ; } var dell1 = new Dell ( 'blue' ) ; alert ( dell1 . name ) ; //=>电脑 上述代码,通过call方法使得Dell继承了Computer的name和type。在输出子构造函数Dell的构造对象的name时,结果为“电脑”。 2.prototype继承

js继承方式上

喜你入骨 提交于 2020-02-09 18:33:03
转自:https://www.cnblogs.com/zt123123/p/7676633.html js不是传统的面向对象语言,那么他是怎么实现继承的呢?由于js是基于原型链实现的面向对象,所以js主要通过原型链查找来实现继承,主要有两大类实现方式,分为基于构造函数的继承,以及非构造函数的继承。 由于篇幅较长,所以把文章分为上下篇,今天先讲解上半部分。 现在有两个类即构造函数,一个是动物类 function Animal() {     this.species = "动物";   } 一个是猫类 function Cat(name, color) {     this.name = name;     this.color = color;   } 怎样才能使"猫"继承"动物"的特性呢? 一、 构造函数绑定 第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行: function Cat(name, color) {     Animal.apply(this, arguments);     this.name = name;     this.color = color;   }   var cat1 = new Cat("大毛", "黄色");   alert(cat1.species); // 动物 二、

js继承与原型链

隐身守侯 提交于 2020-01-26 02:14:23
JavaScript是一种灵活的语言,兼容并包含面向对象风格,函数式 风格等编程风格。面向对象有三大特性和六大原则 原型对象链: js内建的继承方法被称为原型对象链,又称为原型对象继承。对于一个对象,因为它继承了原型对象的属性,所以它可以访问到这些属性。同理,原型对象也是一个对象,他也有自己的原型对象,因此也可以继承它的原型对象的属性 , 这就是原型继承链:对象继承其原型对象,而原型对象继承它的原型对象,以此类推。 对象继承: 使用对象字面量形式创建对象时,会隐式指定 Object.prototype为新对象的[[Prototype]]。使用Object.create()方式创建对象时,可以显式指定新对象的[[Prototype]]。该方法介绍两个参数:第一个为新对象的[[Prototype]],第二个参数描述了新对象的属性,格式如在Object.defineProperties()中使用的一样。 var rectangle = { sizeType: '四边形', getSize: function() { console.log(this.sizeType) } } var square = Object.create(rectangle, { sizeType: { value: '正方形' } }) rectangle.getSize() // "四边形" square

JS继承

我的梦境 提交于 2020-01-18 19:19:59
面向对象:   私有属性、私有方法、特权方法、静态方法、静态属性、公共属性、公共方法、继承、闭包 闭包:有权访问 另一个函数作用域中的变量 的函数     因为链式作用域问题,父级可以访问子级方法内部的变量,     将子级函数作为返回值 继承:   类式继承:        父类的实例赋值给子类的原型。        实例化父类,同时创建了父类原型,将子类原型指向声明的父类,此时子类原型可以访问父类以及父类原型。 构造函数继承:        在子类的构造函数作用域中执行父类的构造函数        子类中声明添加此句 Parent.call(this,params);   组合是继承:        类式继承+构造函数式继承 还是经典的call来调用父类构造函数,将父类重新执行一遍,类似于刷新一遍,这样多个子类实例之间不受引用类型的影响。   原型式继承:子类声明接收父类的类F,将F的原型指向进来的父类,return new F();         将父类在子类中封装返回。          <script type="text/javascript"> function inheritObject(o) { function F(){}; F.prototype = o; return new F(); } var book = { name: "js book",

js继承的方式

故事扮演 提交于 2020-01-16 01:24:42
深入理解继承的实现方式不仅仅有利于自己去造轮子,封装插件,更有利于我们去阅读一些框架的源码, 以下记录几种常见的继承方式 1. 原型链实现继承 function Father(){ this.name = "爸爸" } Father.prototype.sayName = function(){ console.log(this.name) } function Son(){ this.age = 18 //this.name = "儿子" 自己有就不会沿着原型链去找 } //子类原型对象指向父类实例实现继承 Son.prototype = new Father() //子类添加自己的原型方法 只能写在实例后面,不然会覆盖 Son.prototype.sayAge = function(){ console.log(this.age) } var s1 = new Son() s1.sayName() s1.sayAge() console.log(s1.name) 2. 构造函数实现继承 function Father(){ this.colors = ["red","yellow"] this.sayColor = function(){ console.log(this.colors) } } function Son(){ this.age = 18 Father.call

js继承的常用方法

房东的猫 提交于 2020-01-04 17:07:22
   写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_、prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的。博文有点长,如果能仔细看懂每一句话(毕竟都是《高程3》的原话),收获不容小觑。有关面向对象的基础知识,请参见: JS的从理解对象到创建对象.   我们都知道面向对象语言的三大特征:继承、封装、多态,但JavaScript不是真正的面向对象,它只是基于面向对象,所以会有自己独特的地方。这里就说说JavaScript的继承是如何实现的。   学习过Java和c++的都知道,它们的继承通过类实现,但JavaScript没有类这个概念,那它通过什么机制实现继承呢? 答案是: 原型链! 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。   这篇博客主要是关于《高程3》—— 6.3 继承 的总结,建议先阅读阮一峰大神的js继承三部曲,然后再回头看体会更深:    JavaScript面向对象编程(一):封装    JavaScript面向对象编程(二):构造函数的继承    JavaScript面向对象编程(二):非构造函数的继承 下面这个是关于Function和Object创建实例之间的关系,不妨先了解一下它们之间复杂的关系: 图 1 实现继承之前