【JavaScript】原型链继承
时间:2019-01-10
本文章向大家介绍【JavaScript】原型链继承,主要包括【JavaScript】原型链继承使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:
js就严格意义上来讲它不是一个面向对象的语言,因为这里没有类的概念,但是呢它通过某些东西,却可以认为它是基于对象的一门语言,也就是说这里有对象,也有封装,继承和多态,本篇博客主要讲解js中的继承到底是什么原理!
1、什么是原型链
原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(proto)来联系的!
首先明确第一点:每个对象都有__proto__属性,但是只有 函数对象才有prototype属性!
接着明确第二点:实例对象中__proto__是原型,浏览器使用的,构造函数中的prototype是原型,是程序员使用的
接下来图演示一下:
代码:
<script>
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log("吃啥啊");
}
};
Person.prototype.sex = "男";
Person.prototype.sayHi = function () {
console.log("你好啊");
};
var per = new Person("小明", "20");
console.dir(per);//查看类中的属性和方法
</script>
代码对应的图:如下图所示:
此时我们的实例对象可以访问原型对象的方法!
2、原型链是如何体现出继承的
代码
<script>
//人的构造函数
function Person(name, age,sex){
this.name = name;
this.sex = sex;
this.age = age;
}
//原型函数
Person.prototype.eat = function () {
console.log("人可以吃东西");
};
Person.prototype.sleep = function () {
console.log("人在睡觉");
};
Person.prototype.play = function () {
console.log("生活就是不一样的玩法而已");
}
//学生的构造函数
function Student(score) {
this.score = score;
}
//改变学生的原型指向即可
Student.prototype = new Person("小明", 10, "男");
//学生
Student.prototype.study = function () {
console.log("学习很累很累的偶");
}
var stu = new Student(100);
//此时学生对象继承了人的属性和方法,而且自己也能够添加自己的属性和方法
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.eat();
stu.play();
stu.sleep();
console.log("下面的是学生对象中自己有的");
console.log(stu.score);
stu.study();
</script>
代码对应的图:
这就实现了继承;下一篇博客讲述原型链的三种继承方式!
- 【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle
- Entity Framework Core 实现MySQL 的TimeStamp/RowVersion 并发控制
- 《JQuery技术内幕》读书笔记——自调用匿名函数剖析
- 【代码+论文】通过ML、Time Series模型学习股价行为
- .NET Core 系列5 :使用 Nuget打包类库
- 解决transition动画与display冲突的几种方法
- Gof设计模式之装饰者模式(七)
- JavaScript递归中的作用域问题
- constructor属性解析
- Paxos协议学习小结
- mqtt推送介绍
- JavaScript中的原型链原理
- JavaScript易错点 -- 数组比较
- JavaScript几个作用域问题
- 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 数组属性和方法
- 用php定义一个数组最简单的方法
- laravel-admin自动生成模块,及相关基础配置方法
- laravel-admin select框默认选中的方法
- Laravel-admin之修改操作日志的方法
- php使用curl伪造浏览器访问操作示例
- 关于laravel后台模板laravel-admin select框的使用详解
- 基于Laravel-admin 后台的自定义页面用法详解
- php解决约瑟夫环算法实例分析
- 浅谈laravel-admin的sortable和orderby使用问题
- 使用composer安装使用thinkphp6.0框架问题【视频教程】
- 基于laravel-admin 后台 列表标签背景的使用方法
- 解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
- laravel-admin 中列表筛选方法
- Laravel框架控制器的middleware中间件用法分析
- laravel-admin的图片删除实例