javascript 之 继承
时间:2019-03-15
本文章向大家介绍javascript 之 继承,主要包括javascript 之 继承使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.传统方式--->原型链 (过多继承了没用的属性)
Grand.prototype.lastname = 'zhang'
function Grand();
}
var grand = new Grand();
Father.prototype = grand;
function Father(){
this.name = 'hehe';
}
var father = new Father();
Son.prototype = Father();
function Son(){
}
var son = new Son(); //son 即继承了father的,有继承了grand的 ,这就发生了矛盾,无论你需不需要继承这个属性,他都会继承来。
2.借用构造函数(1.不能继承借用的构造函数的原型,2.每次构造函数都要多走一个函数,只是视觉上节省了代码量)
function Person(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name, age,sex,grade){ //借别人的方法去实现自己的东西,实际上没有继承的关系,只是用你的东西干我自己的事情。
Person.call(this,name,age,sex);
this.grade = grade;
}
var studet = new Student();
共有原型
Father.prototype.lastName = 'zhang';
function Father(){
}
// var father = new Father(); //用原型继承的时候,需要实例化两个对象,但使用共有原型,就可以不用实例原型对象,直接使用构造函数的原型就可以
Son.prototype = Father.prototype;
function Son(){
}
var son = new Son();
可以用一个函数封装
但这中也是有缺点的,就是你在给原型添加属性时,因为父亲和孩子都指向一个引用,改一个,另一个也会跟着变。这并不是我们想要到的,我们希望的是,我继承你,但我自己后定义的原型不想影响你。有自定义的,有共有的。这就引出了圣杯模式
圣杯模式
通过添加一个中间层,new Middle()出一个新对象,让这个新对象的原型指向Father的原型,让Son的原型等于new Middle()这个新对象,因为这个新对象是一个全新的对象,所以Son的原型等于新对象并不会影响Father的原型。样Son既可以通过原型链找到Father的原型,
利用闭包私有变量写法
- 【手把手教你全文检索】Lucene索引的【增、删、改、查】
- 红方块躲避—天才游戏
- .NET Core全新路线图(译)
- JS魔法堂:阻止元素被选中
- CSS3魔法堂:禁止用户改变textarea大小
- CentOS6.5菜鸟之旅:VIM插件NERDtree初探
- CentOS6.5菜鸟之旅:安装输入法(小呀小企鹅)
- CSS魔法堂:选择器及其优先级
- 常见的Web实时消息交互方式和SignalR
- 【设计模式】——工厂方法FactoryMethod
- 前端翻译:Activating Browser Modes with Doctype
- JS魔法堂:doctype我们应该了解的基础知识
- CentOS6.5菜鸟之旅:安装Realtek无线网卡驱动
- CentOS6.5菜鸟之旅:U盘安装CentOS64位
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决laravel5中auth用户登录其他页面获取不到登录信息的问题
- Yii框架学习笔记之应用组件操作示例
- laravel 之 Eloquent 模型修改器和序列化示例
- TP5框架请求响应参数实例分析
- laravel 模型查询按照whereIn排序的示例
- 解决在laravel中auth建立时候遇到的问题
- php array 转json及java 转换 json数据格式操作示例
- Thinkphp5 如何隐藏入口文件index.php(URL重写)
- 在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
- thinkphp5使html5实现动态跳转的例子
- php 自定义函数实现将数据 以excel 表格形式导出示例
- 解决tp5在nginx下修改配置访问的问题
- 在PHP中实现使用Guzzle执行POST和GET请求
- c 语言函数指针之回调函数
- 解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题