第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的继承,其他 ...
随机推荐
- Remoteland HDU - 4196
题意: 给出一个n,在[1, n] 中挑选几个不同的数相乘,求能的到的最大完全平方数 解析: 最大的肯定是n!, 然后n!不一定是完全平方数 (我们知道一个完全平方数,质因子分解后,所有质因子的质数均 ...
- 如何获取token值
登录的时候需要拿到token值,需要跟后端配合才能拿到 官方说明: https://developers.weixin.qq.com/miniprogram/dev/api/api-login.htm ...
- linux环境搭建前期配置
一.永久修改主机名 1.修改network文件 # vim /etc/sysconfig/network 加入 HOSTNAME=主机名 保存退出 2.修改hosts文件 # vim /etc/hos ...
- IT项目中使用 json格式数据 保存项目配置信息, 在配置文件再读取json文件的内容进行赋值
json格式小巧玲珑,适合做配置文件,特别是大型项目中, 可以将配置信息分类保存到不同的json文件中, 然后再在配置文件中读取配置文件的数据进行赋值, 这里以python为例进行说明: 假设在you ...
- Jetty实战之 嵌入式Jetty运行web app
Jetty实战之 嵌入式Jetty运行web app 博客分类: 应用服务器 jettywar 转载地址:http://blog.csdn.net/kongxx/article/details/72 ...
- iOS开发中断言的使用—NSAssert()
原文链接:http://blog.csdn.net/univcore/article/details/16859263 断言(assertion)是指在开发期间使用的.让程序在运行时进行自检的代码(通 ...
- FCN详解
转载自:https://www.cnblogs.com/gujianhan/p/6030639.html 论文地址:https://arxiv.org/pdf/1411.4038v1.pdf 背景 C ...
- 4、2支持向量机SVM算法实践
支持向量机SVM算法实践 利用Python构建一个完整的SVM分类器,包含SVM分类器的训练和利用SVM分类器对未知数据的分类, 一.训练SVM模型 首先构建SVM模型相关的类 class SVM: ...
- 微信小程序之蓝牙 BLE 踩坑记录
前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...
- python学习，day3：函数式编程，局部变量和全局变量
# coding=utf-8 # Author: RyAn Bi school = 'THU' #全局变量 def change_name(name): global age #在函数中,用globa ...