第9天：原型、继承、函数使用推荐以及this的指向
原型
javascript原型指向改变如何添加方法和访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//构造函数
function Person(age){
this.age = age;
}
//构造函数
function Student(){
this.sayHi = function(){
alert("1");
console.log("学生");
}
this.name = "名字";
}
//实例对象改变原型指向
Student.prototype = new Person(10);
//实例化
var stu = new Student();
//没有返回的值 为undefined
//在调用sayHi()的时候，执行了sayHi()的函数代码
console.log(stu.sayHi());
//要想改变原型后并且调用添加的方法,要在改变指向之后再添加
Student.prototype.sayHell = function(){
console.log("说hello");
}
stu.sayHell();
</script>
</head>
<body>
</body>
</html>
继承
面向对象的特性：封装、继承、多态、（如果是变成语言还有抽象性）;
|继承，类与类之间的关系，面向对象的语言的继承是为了多态服务的
js不是面向对象的语言，但是可以模拟面向对象，模拟继承，为了节省内存空间
继承：
原型的作用：数据共享、继承；目的是：为了节省内存空间；
有几种方式实现：
- 原型继承:改变原型的指向；
- 借用构造函数继承：主要解决属性的问题（原型继承时，初始化对象数据固定(s属性)）
- 组合继承：原型继承+借用构造函数
既然解决属性的问题，又能解决方法问题 - 拷贝继承：就是把对象中需要共享给的属性或者方法，直接遍历的方式复制到另外一个对象中
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//声明构造函数
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
//通过原型添加方法
Person.prototype.play=function(){
console.log("人可以玩");
}
Person.prototype.eat = function(){
console.log("人可以吃东西");
}
Person.prototype.sleep = function(){
console.log("人可以睡觉");
}
//声明构造函数
function Student(scote){
this.scote = scote;
}
//通过原型改变指向,并实例化对象
Student.prototype = new Person("小红",18,"女");
Student.prototype.study = function(){
console.log("需要学习啊");
}
//实例化对象
var stu = new Student(100);
console.log("继承共同属性");
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.play();
stu.eat();
stu.sleep();
console.log("属性student的属性")
stu.study();
</script>
</head>
<body>
</body>
</html>
继承的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//声明动物的构造函数
function Animal(name,weight){
this.name = name;
this.weight = weight;
}
//动物的原型的方法
Animal.prototype.eat = function(){
console.log("会吃东西");
}
//声明Dog的构造函数
function Dog(furColor){
this.furColor = furColor;
}
//改变原型指向，实例化对象,实现继承
Dog.prototype= new Animal("哮天犬","20kg");
Dog.prototype.bite = function(){
console.log("会咬人");
}
//声明二哈的构造函数
function Erha(sex){
this.sex = sex;
}
//g改变原型指向，实例化对象，实现继承
Erha.prototype = new Dog("黑白色");
Erha.prototype.takeDown = function(){
console.log("哼哼~~~~~~~~~~哈哈，，，拆家");
}
//实例化对象
var erHa = new Erha("雄性");
console.log(erHa.name,erHa.weight,erHa.furColor,erHa.sex);
erHa.eat();
erHa.bite();
erHa.takeDown();
</script>
</head>
<body>
</body>
</html>
借用构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//构造函数Person
function Person(name,age,sex){
this.name = name;
this.age= age;
this.sex = sex;
}
//通过原型添加方法
Person.prototype.say=function(){
console.log("你好");
}
//构造函数Student
function Student(name,age,sex,score){
//借用构造函数
Person.call(this,name,age,sex);
this.score=score;
}
var stu = new Student("小明","18","男",100);
console.log(stu.name,stu.age,stu.sex,stu.score);
</script>
</head>
<body>
</body>
</html>
组合继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
/*
原型实现继承
借用构造函数实现继承
组合继承：原型继承+借用构造函数竭诚
*/
//Person构造函数
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex= sex;
}
//原型添加方法
Person.prototype.sayHi=function(){
console.log("你好");
}
//Student构造函数
function Student(name,age,sex,score){
//借用构造函数
//可以继承属性，但是不能继承方法
Person.call(this,name,age,sex)
this.score = score;
}
//通过原型对象改变指向，实现方法的继承
Student.prototype = new Person();
//验证
var stu1 = new Student("小明","18","男",100);
var stu2 = new Student("大明","88","女",90);
console.log(stu1.name,stu1.age,stu1.sex,stu1.score);
console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
</script>
</head>
<body>
</body>
</html>
拷贝继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function Person(){
}
Person.prototype.name = "小明";
Person.prototype.age = 18;
Person.prototype.sayHi = function(){
console.log("你好");
}
//声明空对象
var obj = {};
//用for..in循环复制Person的prototype
for(var key in Person.prototype){
obj[key]=Person.prototype[key];
}
console.dir(obj);
</script>
</head>
<body>
</body>
</html>
函数声明和函数表达式的区别
- 如果以后写函数，最好使用函数表达式，避免出错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//函数的声明如果放在if-else的语句中，
//在IE8的浏览器中会出现问题（建议使用函数表达式）
if(true){
function f1(){
console.log("执行true的");
}
}else{
function f1(){
console.log("执行else的");
}
}
f1();
//测试IE 兼容方式
//最好的方式
//如果以后写函数，最好使用函数表达式，避免出错
if(true){
ff= function f1(){
console.log("执行true的");
};
}
else{
ff= function f1(){
console.log("执行else的");
};
}
ff();
</script>
</head>
<body>
</body>
</html>
关于this指向
普通函数中的this是谁----window
对象.方法中的this是谁————当前的实例对象
定时器方法中的this是谁————window
构造函数中的this是————实例对象
原型对象方法中的this是——实例对象
所有的函数实际上都是Function的构造函数创建出来的对象
var num = new Function("num1","num","return num1+ num2");
"use strict";//严格模式
function f1(){
console.log(this);//window
}
window.f1();
第9天：原型、继承、函数使用推荐以及this的指向的更多相关文章
- Node.js的原型继承函数util.inherits
util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.Jav ...
- Node.js的原型继承函数 util.inherits
转自:http://sentsin.com/web/179.html util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.Java ...
- javascript原型和原型继承
每一个javascript对象(null除外)都和原型对象相关联,每一个对象都从原型对象继承属性. 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过javascript代码Object.p ...
- JavaScript-原型&原型链&原型继承&组合函数
小小的芝麻之旅: 今天学习了js的原型,要说原型,我们先简单说一下函数创建过程. 原型 每个函数在创建的时候js都自动添加了prototype属性,这就是函数的原型,原型就是函数的一个属性,类似一个指 ...
- JS高级. 03 混入式继承／原型继承／经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链
继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- 高级javascript---原型和原型继承
高级javascript---原型和原型继承 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函数用作构造函数 ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- JavaScript的原型继承
JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他 ...
随机推荐
- 「HNOI 2015」实验比较
\(Description\) 有\(n\)个元素,对于每个元素\(x_i\)最多知道一个形如\(x_j < x_i\)或\(x_j=x_i\)的条件,问有多少合法的序列.合法的序列满足每个元素 ...
- RabbitMq初探——消息分发
消息分发 前言 我们在用到消息队列的场景,一般是处理逻辑复杂,耗时,所以将同步改为异步处理,接入队列,下游处理耗时任务. 队列消息数量很大,且下游worker进程(消费者)处理耗时长,所以就有了任务的 ...
- Ubuntu16.04 - 怎么能够更好设置PATH变量，便于管理？
“/etc/profile”是linux里面的全局变量设置文件,加入这里的PATH变量,全局都可以使用,非常方便.加入时候很简单了,直接在PATH末尾加入":+要加入的变量"就可以 ...
- java学习笔记—第三方操作数据库包专门接收DataSource-dbutils （30）
Dbutils 操作数据第三方包.依赖数据源DataSource(DBCP|C3p0). QueryRunner – 接收DataSource|Connection,查询数据删除修改操作.返回结果. ...
- “全栈2019”Java异常第二十一章：finally不被执行的情况
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- BZOJ 2388--旅行规划(分块&单调栈&二分)
2388: 旅行规划 Time Limit: 50 Sec Memory Limit: 128 MBSubmit: 405 Solved: 118[Submit][Status][Discuss] ...
- MySQL数据库密码破解
研究MySQL数据库的加解密方式,在网络攻防过程中具有重要的意义:试想一旦获取了网站一定的权限后,如果能够获取MySQL中保存用户数据,通过解密后,即可通过正常途径来访问数据库:一方面可以直接操作数据 ...
- RecyclerView的通用适配器
本来这一个主题应该早就写了,只是项目多,属于自己的时间不多,所以现在才开动!! 前一段时间写了一篇文章,是关于ListView,GriView万能适配器,没有看过的同学,可以先看看那篇文章,然后在来学 ...
- [JS] 屏蔽右键
if (window.Event) document.captureEvents(Event.MOUSEUP); function nocontextmenu() { event.cancelBubb ...
- Python Socket 编程示例 Echo Server
简评:我们已经从「Python Socket 编程概览」了解了 socket API 的概述以及客户端和服务器的通信方式,接下来让我们创建第一个客户端和服务器,我们将从一个简单的实现开始,服务器将简单 ...