第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的继承,其他 ...
随机推荐
- vsftp -samba-autofs
摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...
- html开发基础
1 Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode].混杂 ...
- docker-runc not installed on system 问题
问题描述: docker运行镜像的时候,报错如下: 1 2 3 [root@etcd1 k8s]# docker run -it registry.helloworld.com/test/atsd:l ...
- 201621123023《Java程序设计》第13周学习总结
一.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 二.为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网络同 ...
- poj1166时钟翻转
#include<stdio.h> #define TABLE_LEN 5 const int table[10][TABLE_LEN]= {{},{1,2,4,5},{1,2,3},{2 ...
- ADV三星
#include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...
- C语言中printf与i++，C++中的cout
一,printf与i++ 1,C语言中的printf是自右向左输出,. 2,而i++与++i不同的 i++首先取得i的值,下一行时候i = i + 1: ++i,首先i = i + 1,再取得i的值. ...
- jdk完全卸载（亲测jdk1.7.0_80在win7）
1.从控制面板里删除java程序 2.删除注册表:HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\ 3.删除C:\Windows\System32 和 C:\Windows\ ...
- 1.需要对txt存放的测试数据做去重处理，代码如下
采用集合去重,在新文件里逐行写入,达成目的 old_file = "D:/testdata/memberId.txt" #old result_file = "D:/te ...
- appium安装与部署
前提: ①:appium属于C/S架构,代码写在Client端 ②:本章所说的部署讲的是Android设备下的Appium安装与部署 ③:Appium Client的环境是针对python3的 App ...