JavaScript高级

1 面向对象操作

- 回顾对象的基本概念

- 面向对象的相关概念

- 面向对象的特征和操作的实现方式

- 小练习

2 函数的相关内容

- 函数的属性和方法

- 函数的其他使用方式

- 自调用函数

- 回调函数

- 闭包函数

- 递归函数

3 正则表达式

- 介绍:是一个用来操作字符串的工具(内置对象)

- 对象的创建方式

- 单个对象创建方式:{} new Object()

- 多个对象创建方式:

- 内置对象

- Array

- Date

- String

- 自定义构造函数

- 使用方式

- 命名规则:首字母大写

- 调用规则:调用前必须设置new

- 内部操作:通过this给对象设置属性或方法

- new的作用:

- 创建了一个对象

- 将对象返回

- 将this修改为这个对象

- 调用构造函数

- 推荐无论如何都要添加()

- this的使用:

- 全局作用域中:window对象,没用

- 普通调用的函数中

- 默认this为window,也没用

- 作为方法调用的函数中(使用最多的情况) (重要!!!)

- 默认this为当前对象(函数调用者)

- 构造函数中的this (固定用法)

- 被new设置为对象,我们无法操作

- 对象的基本操作

- 分类:

JavaScript的数据类型分为2类

- 简单类型(基本类型)

- string 字符串

- number 数值

- boolean 布尔

- null 空

- undefined 未定义

- 复杂类型

- Object

- Array

- Date

- Math

- String

- 自定义类型(自定义构造函数)

Js中只有对象一种复杂类型,因为内置功能很多,

根据具体的功能分类,有划分为了多种类型

- 对象的使用分类:

- 数据存储功能

- 数组: []

有序的数据存储方式

- 对象: {}

无序的数据存储方式

- 适用于数据需要进行单独标识的场景

- 作为工具使用

- 见前面的复杂类型部分

- 对象的属性操作

- 概念:对象是由属性组成的,属性由属性名和属性值组成

- 方法:方法也是属性,只是保存了函数值,为了区分,起了个新名字而已。

- 操作方式

- 对象.属性名

- 对象['属性名']

- 属性名为字符串值,或通过变量保存时,必须使用这种方式

- 遍历

- 遍历方式: for..in

- 删除方式:

delete 对象.属性名; 删除了属性

// w3c标准和ECMA标准的关系?

// - ECMA标准:js基础语法标准

// - w3c标准:html、css、webAPI

*/

// 面向对象的概念:

// - 面向过程

// - 指的是在编程中,专注于实现功能的'过程',专注于实现的具体的细节。

// - 例如:冒泡排序,需要考虑有几个循环,每个循环多少次,怎么比较和交换。。

// - 面向对象(拿来主义)

// - 指的是在编程中,考虑效果中需要使用哪几部分功能,找到可以帮助我们实现功能的工具(对象)进行操作即可。

// - 例如:操作中需要对某个数组排序,找到数组的sort方法,直接排序后进行后续操作即可。

// 能不能说面向对象操作比面向过程好呢?

// - 不是一个层面的考虑方式,无法直接比较。

// - 例如:我们使用sort是一种面向对象的操作形式,但是sort功能在实现时也是通过面向过程来操作的。

// - 我们可以将两个部分的关系理解为:面向对象是基于面向过程的。

/*

var arr = [5, 2, 3, 1];

arr.sort();

console.log(arr); */

// 吃饭: 自己做饭(面向过程)、 去饭馆吃饭(面向对象)

// 回忆以前我们做过的操作属于哪种使用方式:

// - 面向过程:以前的大部分代码都是面向过程的

// - 面向对象:内置对象操作,jQuery

// 面向对象操作的3个特征:

// - 封装:指的是对象的封装

// - 以前的封装是函数封装,现在的封装是对象的封装,

// 其实就是基于函数封装操作,将功能分类后保存到对象中进行使用。

// - 继承:

// - 为了实现更好的功能复用(jack和jack爸爸的例子)

// - 多态:

// - 一个功能被不同对象操作时,操作效果不同

// 将math相关的功能保存到obj中,就实现了基本函数封装的对象封装操作

/* var obj = {

mathFun1 : function () {

// 求和功能

},

mathFun2 : function () {

// 计算差功能

},

mathFun3 : function () {

// 计算乘法功能

}

}; */

/* function CreateObj (name, age) {

this.name = name;

this.age = age;

this.sayHi = function () {

console.log('你好,我的名字是' + this.name);

};

} */

// 通过new的方式可以创建具有构造函数中功能的对象

// 我们将这种对象称为'实例对象'

/* var c1 = new CreateObj('jack', 18);

var c2 = new CreateObj('rose', 21); */

// 通过观察我们发现c1和c2两个实例对象的属性值不同,很正常

// c1和c2的sayHi方法值相同不?

// console.log(c1, c2);

/* console.log(c1.sayHi);

console.log(c2.sayHi); */

// 通过观察我们发现c1和c2的sayHi方法值长得一样,但推测不是同一个函数

// - 可以通过==或===进行比较

// - 注:对复杂类型进行==或===比较时,必须是同一个值才能返回true

/* console.log(c1.sayHi == c2.sayHi); // false,说明不是同一个函数

console.log(c1.sayHi === c2.sayHi); // false,说明不是同一个函数 */

// 出现的问题:函数的作用是重用,操作时不应当设置多个相同功能的函数

// 解决方式:将方法值设置为命名函数统一保存,让功能可以重用

vartemp= {

sayHi:function() {

console.log('你好,我的名字是'+this.name);

},

sayHehe:function() {

console.log('你好,我的名字是'+this.name);

}

};

functionCreateObj(name,age) {

this.name=name;

this.age=age;

// 将sayHi函数体设置给this.sayHi

this.sayHi=temp.sayHi;

this.sayHehe=temp.sayHehe;

}

varc1=newCreateObj('jack',18);

varc2=newCreateObj('rose',21);

// 检测后:c1和c2的sayHi是用一个函数,达到了改进的目的

console.log(c1.sayHi===c2.sayHi);// true

// 新的问题:

// - 为了优化构造函数,设置了命名函数保存,这些函数被自动设置为window的方法

// - window的方法变多了,导致执行速度变慢..

// - 任意的一个对象,属性越多,访问的速度越慢

// 解决方式:

// - 设置一个临时的对象,用来统一保存构造函数中的方法值

// prototype 原型

// - 任意函数都自带prototype属性

// prototype的值,默认就是一个对象,就是用来保存构造函数中的方法使用的。

functionCreateObj(name) {

this.name=name;

this.age=18;

this.hobbies= ['吃','喝'];

// 之前的方法设置方式:

/*

this.sayHi = function () {

console.log('你好,我的名字是' + this.name);

};

this.sayHehe = function () {

console.log('呵呵呵');

};

*/

}

// console.log(CreateObj.prototype);

// 以后的方法设置方式:

// - 考虑某个函数中的this时,一定先考虑函数是如何执行的

CreateObj.prototype.sayHi=function() {

console.log('你好,我的名字是'+this.name);

};

CreateObj.prototype.sayHehe=function() {

console.log('呵呵呵');

};

varc1=newCreateObj('jack',18);

varc2=newCreateObj('rose',21);

c1.sayHi();// c1在调用sayHi方法,sayHi中的this就是c1

c2.sayHi();// c2在调用sayHi方法,sayHi中的this就是c2

// console.log(c1.sayHi === c2.sayHi); // true

// 小结论:

// 将方法设置给prototype后,实例对象可以直接使用,也是统一保存的方法值

// - 以后设置方法时,统一设置给 构造函数.prototype 即可

// 对象属性的基本查找方式:

// - 1 查找对象自身,如果存在,就使用

// - 2 如果没有对应功能,在查找__proto__,也就是构造函数的原型

// - 如果原型中存在对应功能,也可以使用

// 从语法角度观察,Array是构造函数,arr就是实例对象

vararr=newArray(1,2,3,4,5);// 相当于[1, 2, 3, 4, 5]

arr.push(8);

console.log(arr);

// 通过观察arr,我们发现内置对象设置方法时,采用的方式与我们相同,都是设置在了prototype中

// 如果我们希望给内置构造函数Array增加方法,设置在Array.prototype中即可

// 例如:设置一个用于数组求和的方法

/* function getSum (arr) {

var sum = 0;

for (var i = 0; i < arr.length; i++) {

sum += arr[i];

}

return sum;

}

console.log(getSum(arr)); */

// 将getSum设置为数组的方法,任意数组均可使用

Array.prototype.getSum=function() {

varsum=0;

for(vari=0;i<this.length;i++) {

sum+=this[i];

}

returnsum;

};

console.log(arr.getSum() );

// 我们自己书写的代码可以在控制台输出查看

// 例如: console.log(arr.getSum);

// 内置的功能无法查看代码,查看结果为 ƒ push() { [native code] }

// 例如: console.log(arr.push);

// 实际使用方式:

// - 这个属性是给示例对象访问的,用来确定实例对象是通过哪个构造函数创建的。

// - 功能作用:类型检测操作

// typeof 只能检测除null的简单类型和function

// instanceof

// - 以后希望确定当前对象的类型时,检测constructor即可,比instanceof好用一些

// - constructor的作用非常单纯,就是用来检测类型,确定了类型就确定了功能

// 作用域链回顾:

// - 作用:用来描述变量名/函数名的查找方式

// - 沿作用域链查找

// - 查找的最终位置:全局作用域

// 原型链:

// - 原型链是由一个或多个原型组成的结构。

// - 作用:用来描述对象属性的查找方式

// - 查找方式:沿原型链查找

// - 查找的最终位置:Object.prototype

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容