6.30 js学习笔记

2023-11-28 08:32
文章标签 学习 笔记 js 6.30

本文主要是介绍6.30 js学习笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

继：

多继承

      //多继承function muliExtend() {var n={},stuff,j=0,len=arguments.length;for(j=0;j<len;j++){stuff=arguments[j];for(var i in stuff){n[i]=stuff[i];}}return n;}var Shape={name:'shape',toString:function () {return this.name;}};var TwoDShape={name:'2d',test:'this is '};var Triangle=muliExtend(Shape,TwoDShape,{name:'triangle',getArea:function () {return this.side*this.height/2;},side:5,height:10});console.log(Triangle.getArea());console.log(Triangle.test);console.log(Triangle.toString());

结果：
在这里插入图片描述

继承小结

1.原型链继承

缺点 1)、数据共享问题 引用类型数据 实例之间相互影响 2).创建子类型实例时没办法向超类传递参数 3.只能单继承( 只能继承一个父类)

function SuperType() {this.name = '张三';this.like = ['food', 'cake'];}SuperType.prototype.sayName = function () {console.log(this.name)}function SubType() {this.age = '26';}SubType.prototype = new SuperType();SubType.prototype.sayAge = function () {console.log(this.age)}let person1 = new SubType();let person2 = new SubType();person1.sayAge() //26person1.sayName() // 张三person1.like.push('flower')console.log(person1.like) // ["food", "cake", "flower"]console.log(person2.like) // ["food", "cake", "flower"]
2.构造函数继承

优点：解决原型链继承引用类型数据共享和没办法传递参数问题；可以多继承 。 缺点：方法多次重复定义

 function SuperType(name) {this.name = name;this.like = ['food', 'cake'];this.sayName = function () {console.log(this.name)}}function SuperType2(date) {this.birthday = date;this.sayDate = function () {console.log(this.birthday)}}function SubType(name, age, date) {//多继承SuperType.call(this, name);SuperType2.call(this, date)this.age = age;this.sayAge = function () {console.log(this.age)}}let person1 = new SubType('张三', 26, '2013-12');let person2 = new SubType('李四', 28, '2013-11');person1.sayName() // 张三person2.sayName() // 李四person1.sayDate() //2013-12person1.like.push('flower')console.log(person1.like) // ["food", "cake", "flower"]console.log(person2.like) // ["food", "cake"]
3.组合继承（原型链 + 构造函数）

优点：避免了原型链和构造函数的缺陷，能实现函数复用，每个实例也都有自己的属性。 缺点：超类构造函数执行了两次

function SuperType(name, like) {this.name = name;this.like = like}SuperType.prototype.sayName = function () {console.log(this.name)}function SubType(name, age, like) {SuperType.call(this, name, like)this.age = age;}SubType.prototype = new SuperType();SubType.prototype.sayAge = function () {console.log(this.age)}let person1 = new SubType('张三', '28', ['food', 'cake']);let person2 = new SubType('李四', '28', ['food', 'cake']);person1.sayName() //张三person2.sayName() //李四person1.like.push('flower');console.log(person1.like) // ["food", "cake", "flower"]console.log(person2.like) // ["food", "cake"]
4.寄生组合式

优点： 解决超类构造函数调用两次问题。 我们只需要让子类能访问到超类的原型的就可以。

//其他地方和组合继承一致
SubType.prototype = Object.create(SuperType.prototype)//Object.create 传一个参数时和如下object函数行为一致
function object(obj) {function F() { }F.prototype = obj;return new F()
}

但为什么不直接让 子类原型等于超类原型呢？

//这样不是更省事吗？SubType.prototype = SuperType.prototype//这样如果在SubType原型上添加属性 SuperType原型上也会影响到
//如SubType.prototype.sayAge = function () {console.log(this.age)}
//SuperType.prototype 也会存在sayAge方法
5.ES6继承
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），
然后再用子类的构造函数修改this。                         —— 《ECMAScript 6入门》阮一峰
class A {p() {return 2;}
}class B extends A {constructor() {//作为函数调用 代表父类构造函数super();//作为对象调用 指向父类原型对象console.log(super.p()); // 2}
}

instanceOf

在理解instanceof之前，必须熟悉理解原型链中的prototype与__proto__

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。

每个对象都有 proto 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使用 proto 来访问。

对象可以通过 proto 来寻找不属于该对象的属性，proto 将对象连接起来组成了原型链。

在这里插入图片描述

instanceof运算符是用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

语法： object instanceof constructor

参数： object（要检测的对象，如果不是对象，直接返回false）constructor（某个构造函数）
描述： instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

let num=1;     //非对象
console.log(num instanceof Number); //false
num =new Number(1);
console.log(num instanceof Number); //true
实例：

1、普通用法，obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。

function Person(){} 
var p = new Person(); 
//p.__proto__==Person.prototype
console.log(p instanceof Person);  //true
//Person.prototype.__proto__==Object.prototype
//p.__proto__.__proto__==Object.prototype
console.log(p instanceof Object);  //true

2、在继承关系中用来判断一个实例是否属于它的父类

function Father(){};
function Child(){};
var f =new Father();
Child.prototype=f;      //继承原型
var c=new Child();
console.log(c instanceof Child);//true
//c.__proto__==Child.prototype==f
//c.__proto__.__proto__==f.__proto_==Father.prototype
console.log(c instanceof Father);//true

也可以这样理解：

function _instanceof(A, B) {var O = B.prototype;// 取B的显示原型A = A.__proto__;// 取A的隐式原型while (true) {if (A === null) //Object.prototype.__proto__ === null,遍历完整条原型链都没有找到，返回falsereturn false;if (O === A)   //找到了返回truereturn true;A = A.__proto__; //继续往隐式原型走，直到遍历完整条原型链}
}

在理解以上代码后可以看一下下面的例子：

console.log(Object instanceof Object);//true 
//第一个Object的原型链：
//Object.__proto__ => Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Object的原型：
//Object=> Object.prototype
console.log(Function instanceof Function);//true 
//第一个Function的原型链：
//Function=>Function.__proto__ => Function.prototype
//第二个Function的原型：
//Function=>Function.prototype
console.log(Number instanceof Number);//false 
//第一个Number的原型链：
//Number=>Number.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Number的原型链：String=>String.prototype
console.log(String instanceof String);//false  
//第一个String的原型链：
//String=>String.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个String的原型链：String=>String.prototype
console.log(Function instanceof Object);//true  
//第一个Function的原型链：
//Function.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Object的原型：
//Object=> Object.prototype

类的继承

四部曲

<script>1）创建父类function Person(){}
Person.prototype.age = 18;//给父类添加属性
var p1 = new Person();//给父类添加方法2）创建子类function Child(){}3）确定继承关系Child.prototype = Object.create(Person.prototype);
Child.prototype.stuno = "2000";4）改造构造器（不是很重要）</script>

实例：

 <script>//父类function Person() {}Person.prototype.headCount =1;Person.prototype.eat=function () {console.log("eating...");};//子类function Programmer() {}Programmer.prototype=Object.create(Person.prototype);//实现继承Programmer.prototype.constructor=Programmer;Programmer.prototype.language ="java";Programmer.prototype.work = function () {console.log("i am writing" +this.language);}</script>

结果：

在这里插入图片描述

稍作修改：

  <script>//父类function Person(name,age) {this.name=name;this.age=age;}Person.prototype.headCount =1;Person.prototype.eat=function () {console.log("eating...");};//子类function Programmer(name,age,title) {Person.apply(this,arguments);}//当成构造器// Programmer.prototype=Object.create(Person.prototype);//实现继承// Programmer.prototype.constructor=Programmer;createEx(Programmer,Person);Programmer.prototype.language ="java";Programmer.prototype.work = function () {console.log("i am writing" +this.language);Programmer.base.eat();}function createEx(Child,Parent) {function F() {  };F.prototype=Parent.prototype;Child.prototype=new F();Child.prototype.constructor=Child;Child.super =Child.base=Parent.prototype;}</script>

结果：
在这里插入图片描述

在这里插入图片描述
我们先看看不用class实现的继承

function animal(){this.a=1;
}
animal.prototype.dw=function(){console.log("动物的原型方法")
}
function Dog(){this.b=2;
}
Dog.prototype.sy=function(){console.log("sy")
}
Dog.prototype=new animal()//1.这句话把Dog的原型指向了animal
var hashiqi=new Dog();
hashiqi.dw();//2.Dog的实例对象hashiqi便有了动物的原型方法dw
hashiqi.sy();//3.Dog的实例对象hashiqi便失去了构造函数原有的原型方法sy
console.log(hashiqi.a);//4.Dog的实例对象hashiqi便有了动物的所有属性,如上面的a
console.log(hashiqi.b);//5.Dog的实例对象hashiqi构造函数的属性未失去,如上面的bark
console.dir(hashiqi)

很简单通过修改原型指向实现了继承当然还有其他方法比如call和apply

接下来我们看看class实现的继承语法

class Animal{constructor(name) {this.name=name}eat(){console.log(`${this.name}`);}
}
class Dog extends Animal{constructor(name,age){super(name)//但凡看到extends继承那这句就固定加上super//相当于es5中Animal.call(this,name)//super()负责初始化this.相当于ES5中的call和apply方法。this.name=namethis.age=age}say(){console.log(`${this.name}=>${this.age}`)}
}
var dog=new Dog("cxk",12);
dog.say()
dog.eat()

ES5中，我们通过在继承的函数中调用call()或者apply()方法实现继承。
但凡看到extends继承 那这句就固定加上super
在es5中我们用 被继承的函数名.call(this,参数,…参数) 来修改this的指向
那么这里的super()负责初始化this.就相当于ES5中的call和apply方法。

这篇关于6.30 js学习笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/429389。

相关文章

Java学习手册之Filter和Listener使用方法

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》：本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter（过滤器）1. Filter 的工作原理2. Filter 的配置与使用二、Listen
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
Node.js 数据库 CRUD 项目示例详解(完美解决方案)

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》：本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
利用Python快速搭建Markdown笔记发布系统

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言：为什么要自建知识博客一、技术选型：极简主义开发栈二、系统架构设计三、核心代码实现（分步解析
阅读更多...
用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Java进阶学习之如何开启远程调式

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,：本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2