javascript的面向对象编程一起来看看
目录
- 函数的定义和使用
- this指向问题
- 严格模式
- 高阶函数
- 闭包
- 递归
- 正则表达式
- ES6
- 总结
年后来工作的我，be like：
而且刷微博刷着刷着也会遇到一群说出我心中所想的话：
呜呜呜~~（我是分割线）~~
好啦，不管怎样生活总还是要继续的！
在年后的这些天里我一边炫沙糖桔一边也开始陆陆续续开始重新投入学习，主要学习的是面向编程对象。
同样先放上一张学习框架图：
函数的定义和使用
这一板块的内容主要是对之前Jquery的复习，复习了：函数的定义方法、函数的调用方法。（在这我就不做过多的赘述）
this指向问题
这一模块的内容主要是学习不同函数中this指向的对象是谁、改变函数内部this的指向方法：call、apply、bind。
改变函数内部this的指向方法：call、apply、bind。
这三个方法共同点：都能改变this的指向；
这三个方法不同点：
- call和apply会调用函数，并且改变函数内部this指向；
- call和apply传递的参数不一样，call传递参数使用逗号隔开，apply使用数组传递；
- bind不会调用函数，可以改变函数内部this指向。
严格模式
这一模块的内容主要是学习了解什么是严格模式。
严格模式定义：ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。（严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。）
开启严格模式：
- 为脚本开启严格模式；
- 为函数开启严格模式。
高阶函数
这一模块的内容主要是学习高阶函数的定义与相关应用。
高阶函数定义：高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
最好理解的就是回调函数，它就是高阶函数。
闭包
这一模块的内容主要是学习闭包的定义、闭包的作用、闭包的运用。
闭包定义：闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
闭包作用：延申了变量的作用范围。
闭包的运用：
点击li打印当前索引号
<body>
<ul class='nav'>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
</body>
<script>
// 原始获得索引号的方法
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
console.log(this.index);
}
}
// 闭包的定义：指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
// 需求：利用闭包来得到li的索引号
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
(function(i) {
// console.log(i);
lis[i].onclick = function() {
console.log(i); //我们为了点击时才会出现i
}
})(i);
}
</script>
3s后打印li里面的内容
<body>
<ul class='nav'>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
</body>
<script>
// 利用闭包来得到li的索引号
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
(function(i) { //这是立即执行函数
// 简单来说就是把定时器放在立即执行函数里面
setTimeout(function() { //在立即执行函数里的任何一个函数都可以调用立即执行函数里的变量
console.log(lis[i].innerHTML);
}, 2000)
})(i);
}
</script>
打车价格的计算应用
<!-- 需求：打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费 -->
<script>
var car = (function() { //立即执行函数
var start = 13; //起步价
var total = 0; //总价
return {
price: function(n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5;
}
return total;
},
yd: function(flag) {
return flag ? total + 10 : total;
} //拥堵的费用
}
})();
car.price();
console.log(car.price(5));
console.log(car.yd(true));
</script>
递归
这一模块的内容主要是学习递归的定义、递归的运用。
递归的定义：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数。
注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。
递归的运用：
求1~n的阶乘
<script>
function fn(n) {
if (n == 1) {
return 1; //判断条件来退出
}
return n * fn(n - 1); //思路：前一项*后一项
// 利用return来调用函数本身
};
// fn(); //递归类似于循环;自己调用自己
console.log(fn(4));
</script>
求斐波那契数列
<script>
// 1、1、2、3、5、8、13、21...当用户输入n的值来得到在斐波那契数列中的值
function fb(n) {
if (n === 0 || n === 1 || n === 2) {
return 1;
} else {
return fb(n - 1) + fb(n - 2); //规律：当用户输入n我们得到(n-1)和(n-2)这两项就能计算出n、对应的序列值
}
}
console.log(fb(0));
console.log(fb(4));
</script>
递归遍历数据
<script> var data = [{ id: 1, name: '家电', goods: [{ id: 11, gname: '冰箱' }, { id: 12, gname: '洗衣机' }] }, { id: 2, name: '服饰' }]; // 效果：我们想要输入id号就可以返回的数据对象(利用递归来遍历) // 1.利用forEach 去遍历里面的每一个对象 function getID(json, id) { //json就是一整个大的数组 json.forEach(function(item) { //item就是data里面的id if (item.id == id) { console.log(item); // } else if (item.goods && item.goods.length > 0) { // 2.遍历对象里面的对象11 12 可以利用递归函数(调用自己getID(对象里面的对象item.goods，id)) // 里面应该有goods这个数组并且数组的长度不为0 getID(item.goods, id); } }); } getID(data, 1); getID(data, 2); getID(data, 11);</script>
正则表达式
这一模块的内容主要是学习正则表达式定义、正则表达式在js中的使用。（该模块需要查阅文本来使用）
学习框架如下：
ES6
这一模块的内容主要是学习ES6新增语法、ES6内置对象拓展。
ES6新增语法框架：
ES6内置对象拓展框架：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
JS面向对象编程基础篇（二） 封装操作实例详解
本文实例讲述了JS面向对象编程封装操作.分享给大家供大家参考,具体如下: Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 封装 一. 生成实例对象的原始模式 假定我们把猫看成一个对象,
-
JS面向对象编程实现的拖拽功能案例详解
本文实例讲述了JS面向对象编程实现的拖拽功能.分享给大家供大家参考,具体如下: 原始的面向过程代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #box { width: 100px; height: 100px; background: blue; position: absolute; } </style> <title>
-
JS面向对象编程基础篇（一） 对象和构造函数实例详解
本文实例讲述了JS面向对象编程对象和构造函数.分享给大家供大家参考,具体如下: 面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式.它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟.每一个对象都是功能中心,具有明确分工,可以完成接受信息.处理数据.发出信息等任务.对象可以复用,通过继承机制还可以定制.因此,面向对象编程具有灵活.代码可复用.高度模块化等特点,容易维护和开发,比起由一系列函数或指令
-
JS面向对象编程基础篇（三） 继承操作实例详解
本文实例讲述了JS面向对象编程继承操作.分享给大家供大家参考,具体如下: 构造函数的继承 上一篇JS面向对象编程封装操作,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; this.action="吃" } 还有一个&
-
JS面向对象编程实现的Tab选项卡案例详解
本文实例讲述了JS面向对象编程实现的Tab选项卡.分享给大家供大家参考,具体如下: Tab选项卡案例 下面是一个简单面向过程的Tab选项卡. <!DOCTYPE html> <html> <head> <style> #tabBox input { background: #F6F3F3; border: 1px solid #FF0000; } #tabBox .active { background: #E9D4D4; } #tabBox div { w
-
javascript的面向对象编程一起来看看
目录 函数的定义和使用 this指向问题 严格模式 高阶函数 闭包 递归 正则表达式 ES6 总结 年后来工作的我,be like: 而且刷微博刷着刷着也会遇到一群说出我心中所想的话: 呜呜呜~~(我是分割线)~~ 好啦,不管怎样生活总还是要继续的! 在年后的这些天里我一边炫沙糖桔一边也开始陆陆续续开始重新投入学习,主要学习的是面向编程对象. 同样先放上一张学习框架图: 函数的定义和使用 这一板块的内容主要是对之前Jquery的复习,复习了:函数的定义方法.函数的调用方法.(在这我就不做过多的赘
-
深入理解JavaScript系列（17）：面向对象编程之概论详细介绍
介绍 在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题).我们将更多地从理论方面看这些问题. 特别是,我们会考虑对象的创建算法,对象(包括基本关系 - 继承)之间的关系是如何,也可以在讨论中使用(我希望将消除之前对于JavaScript中OOP的一些概念歧义). 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/ 概论.范式与思想 在进行E
-
学习Javascript面向对象编程之封装
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 一. 生成对象的原始模式 假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性. var C
-
深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现
介绍 本章是关于ECMAScript面向对象实现的第2篇,第1篇我们讨论的是概论和CEMAScript的比较,如果你还没有读第1篇,在进行本章之前,我强烈建议你先读一下第1篇,因为本篇实在太长了(35页). 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/ 注:由于篇幅太长了,难免出现错误,时刻保持修正中. 在概论里,我们延伸到了ECMAScript,现在,当我们知道它OOP
-
JavaScript插件化开发教程 （二）
一,开篇分析 Hi,大家好!还记得前面的那篇文章吗------这个系列的开篇(JavaScript插件化开发教程一).主要讲述了以"jQuery的方式如何开发插件", 那么今天我们带着昨天的疑问来继续我们的插件开发之旅.之前的问题如下: (1),如果项目技术选型换了这些插件又是强依赖"jQuery"机制,我们以前写的插件将会不能用(假设不用jQuery的情况),如何做重构那? (2),重构插件的关键逻辑,我们将如何组织那? 好了,带着问题去学习今天的文章吧. 首先我
-
JavaScript结合Bootstrap仿微信后台多图文界面管理
js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms
-
javascript获取wx.config内部字段解决微信分享
背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head>
-
如何正确理解javascript的模块化
模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力.但是引用别人编写模块的前提是要有统一的"打开姿势",如果每个人有各自的写法,那么肯定会乱套,下面介绍几种JS的模块化的规范. 一:模块化进程一:script标签 这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命
-
ASP ajax分页教程一
为什么我写ASP分页教程要提到AJAX呢,因为我们要多练习一下编程过程中,结构化的重要性. 再加上很多朋友对分页感到很高深,所以一直都不敢去碰他,要么就用别人写好的组件,要么就是改改别人的东西.特别是.net,我深有感触,假如要快速开发一个项目,我想.net是一个非常优秀的平台.但是,因为他的严重控件化,反而是新手接触不到编程的思想,完全找不到编程的感觉,仿佛就象在搭积木.有时候还是要练习一下底层一点的东西,这样个人的技术能力才会得到提高.我可不想做只会用.NET的组装工人. 好了,下面给出AS
-
基于javascript制作微信聊天面板
本文实例分享了javascript制作微信聊天面板的相关代码,具体内容如下 先上图吧 点击头像更换说话对象,简单说下实现原理,html中创建一个ul用于存放所有说话的内容,对话内容是有javascript 动态生成, 主要难点:先布局好css,当时奥巴马发送时候,让这个li有浮动,当是小胖时候,让这个li左浮动. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT