Jadual Kandungan
第一章 JavaScript简介" >第一章 JavaScript简介
第二章 HTML中使用JavaScript" >第二章 HTML中使用JavaScript
第三章  基本概念" >第三章  基本概念
第四章  变量、作用域和内存问题" >第四章  变量、作用域和内存问题
第五章  引用类型" >第五章  引用类型
第六章  面向对象的程序设计" >第六章  面向对象的程序设计
第七章 函数表达式" >第七章 函数表达式
Rumah hujung hadapan web tutorial js JavaScript高级程序设计介绍

JavaScript高级程序设计介绍

Jul 18, 2017 pm 05:06 PM
javascript js Pengaturcaraan


前言:

  大致花费了一个星期的时间把这本书认真看了半本,下面是我做的阅读笔记,希望能够让看这本书的人有个大致的参考。目前可能写得较乱不够全面,后续我会整理添加。(2017-7-17) 

第一章 JavaScript简介

第二章 HTML中使用JavaScript

第三章  基本概念

3.1.语法

区分大小写

标识符(建议用驼峰大小写myCar)

注释// /**/

严格模式(use strict)

语句 建议var diff-a-b;要用分号,以及 if( test ) {  alert(test);  }一句话也要用{}

 

3.2 关键字和保留字

 

3.3 变量

未初始化undefined    var message = “hi”; message = 100; 类型随便换

 

Function test(){

Var a = “hi”; 局部

b = “hi”; 全局

}
Salin selepas log masuk

Test();  alert(a); 错误  alert(b); hi

 

3.4 数据类型

typeof

Undefined (定义但未被赋值)

Null(空对象指针)

Boolean(布尔值 true false 流程控制语句会自动执行相应boolean转换)

Number

(八进制 0  十进制  十六进制 0x  浮点数值 数值范围 NaN 数值转换Number parseInt )

String(字符串,单双引号没区别,转义序列,字符串特点,toString  String)

Object(对象 所有对象的基础 var o = new Object();)

函数在ES中是对象,不是一种数据类型。

 

3.5操作符

一元操作符 ++ -- + -(可用于转换数据类型)

 

位操作符  按位非~num1 按位与& 按位或| 按位异或^ 左移<< 右移>> 无符号右移>>

 

布尔操作符 &&  ||   乘性操作符 * / %   加性操作符 + -   关系操作符 < > <= >=

 

相等操作符 ==   !=   ===  !==   条件操作符 ?:  

 

赋值操作符 =  *=  /=  %=  +=  -=  <<= >>=  >>>=

 

逗号操作符

 

3.6 语句

 

3.7 函数  

arguments      没有重载

 

第四章  变量、作用域和内存问题

4.1 基本类型和引用类型的值

动态的属性  (引用类型能动态地添加属性)

复制变量值  (基本类型是不同的空间,引用类型是引用相同的空间)

传递参数    (一样)

检测类型    (typeof  instanceof)

 

4.2执行环境及作用域

作用域链 延长作用域链(try-catch  with)  没有块级作用域(if for 声明变量 查询标识符)

 

4.3垃圾收集

策略(标记清除 引用计数)  性能问题  管理内存 

 

第五章  引用类型

5.1 Object类型

 

Var person = {};(适合给函数传入大量参数)    var parson = new Object();

 

Person[“name”](使用变量来代表属性时用)   person.name(推荐)

 

 

 

5.2 Array类型

 

Var colors = new Array();    var colors = Array();  var colors =[*****];

 

Colors[*] = *****;     colors.length

 

检测数组:  instanceof   Array.isArray()

 

转换方法:  toString()    valueOf()   toLocaleString()   join()

 

栈方法:  push()  pop()

 

队列方法: shift()  unshift()

 

重排序方法: reverse()  sort(可加入比较函数这个参数)  

 

操作方法:concat()原没变 添加    slice()原没变 截取段    splice()原变了 可删可添

 

位置方法: indexOf()  lastIndexOf()  返回项的位置

 

迭代方法:every() filter() forEach() map() some()  对每个项都进行处理,但原数组不会变

 

并归方法:reduce()顺序  reduceRight()反序   对两项一直遍历到最后

 

5.3 Date类型

 

New Date() 里面parse(“May 25,2004”) UTC(2005,0)       Date.now()

 

继承的方法:toLocaleString()  toString()  valueOf()

 

日期格式化方法:toDateString() toTimeString() toLocaleDateString() toLocaleTimeString() toUTCString()

 

日期/时间组件方法:太多具体看书

 

5.4RegExp类型

 

字面量 var pattern1 = / [bc]at / i;

 

构造函数 var pattern2 = new RegExp(“  [bc]at  ”, ” i ”);

 

RegExp实例属性 global ignoreCase lastIndex multiline source    没什么卵用

 

RegExp实例方法:exec() 捕获组(捕获多组匹配项)   text() 一次看是否匹配     

 

RegExp构造函数属性:有点多,用来看最近一次匹配的相关信息

 

模式的局限性:缺少某些语言(Perl)所支持的高级正则表达式特性,但是绝大多数情况够用

 

5.5 Function类型     函数是对象(也是Function的实例),函数名是指针。

 

function sum(num1,num2) {  }

 

Var sum = function(num1,num2){  };

 

没有重载:函数是对象,函数名是指针。

 

函数声明与函数表达式:function ******* 函数声明提升    var sum = ******* 不会提升

 

函数内部属性:arguments对象(属性callee指向函数)   this对象(指向函数执行的环境对象)      属性caller (指向调用当前函数的函数,如果是全局作用域的函数则值为null)

 

函数属性和方法:

 

属性(length声明参数个数  prototype继承)  

 

非继承方法: call()    apply()   bind()

 

a.apply( b, c);  a.call( b, d );      

 

在环境对象b里运行函数a ,顺便给a传入参数c( argument或者 数组)  /  d( 每项写 出来 )  

 

Var a = b.bind(c);

 

a 是在c环境对象里运行的函数

 

5.6基本包装类型:

 

Boolean类型:var booleanObject = new Boolean(true);  建议永远不要使用Boolean对象。

 

 

 

Number类型:var numberObject = new Number(10);  toFixed()  toExponential()  toPrecision()

 

也建议不要直接实例化Number类型。

 

 

String 类型:var stringObject = new String(“hello world”);  length属性  

 

1.字符方法:charAt()或者string[]   返回对应字符     charCodeAt()   返回对应字符编码

 

2.字符串操作方法:

 

concat() 或者 +操作符 和数组的concat()看起来一样  

 

Slice()  substring()  substr()  截取字符串,三个很灵活

 

3.字符串位置方法:indexOf()   lastIndexOf()

 

4.trim()方法  删除前置及后缀的所有空格     trimLeft()  trimRight()

 

5.字符串大小写转换方法

 

toLowerCase()  toUpperCase() 经典方法

 

toLocaleLowerCase()  toLocaleUpperCase() 特定地区   这种更加稳妥

 

6.字符串的模式匹配方法

 

match() RegExpexec()本质一样 返回匹配到字符串的数组

 

search() 返回第一个匹配项的索引 否则返回-1

 

replase() 匹配且替换字符串

 

split() 匹配分隔符生成数组

 

7.localeCompare()   比较两个字符串

 

8.fromCharCode()   静态方法    将多个字符编码变成字符串

 

9.HTML方法    比如big()     string

 

5.7 单体内置对象

 

1.Global对象

 

URL编码方法:

 

encodeURI() 整个     encodeURIComponent() 某一段    编码

 

decodeURI() 整个     decodeURIComponent() 某一段    解码

 

eval()方法  非常强大 也非常危险 ECMAScript解析器

 

Global对象的属性     undefinedArray.........都是属性

 

Web浏览器是将全局对象作为window对象的一部分加以实现的

 

2.Math对象

 

Math对象的属性    一些特殊值比如π

 

min() max() 方法

 

舍入方法:小数值变整数    

 

Math.ceil(25) 进一    Math.floor(25) 退一    Math.round(25) 四舍五入

 

random()方法   [0,1) 之间的随机数

 

其它方法  太多看书

 

第六章  面向对象的程序设计

 

6.1理解对象

 

6.1.1属性类型:

 

数据属性:4个特性  

 

访问器属性:不包含数据值 4个特性 通过Object.defineProperty()定义

 

6.1.2定义多个属性: Object.defineProperties()  可以是数据属性,也可以是访问器属性。

 

6.1.3读取属性的特性:Object.getOwnPropertyDescriptor()

 

 

6.2创建对象

 

6.2.1工厂模式(看书)

 

6.2.2构造函数模式(看书  new  constructor  )

 

6.2.3原型模式:

 

1.理解原型对象

 

2.原型与in操作符( in  for-in )

 

3.更简单的原型语法( 对象字面量来访问对象 )

 

4.原型的动态性( 原型可以换成另外一个对象,但对已经创建的实例无效了 )

 

5.原生对象的原型( 就是用原型模式,可以定义新方法在里面,但是不推荐)

 

6.原型对象的问题:没有属于实例自己的属性

 

6.2.4组合使用构造函数模式和原型模式

 

最常见的模式,实例有自己的属性和方法,也有共享的。

 

6.2.5动态原型模式

 

在上面的模式再加一个判断语句,来动态在原型中加入方法。

 

6.2.6寄生构造函数模式

 

和工厂模式的区别就一个new,还有它有多个return。返回的对象和构造函数没有关系,导致不能用instanceof操作符来确定对象的类型。不太建议使用。

 

6.2.7稳妥构造函数模式

 

跟寄生构造函数模式有相似处,但不用thisnewinstanceof也检测不出

 

 

6.3继承

 

6.3.1原型链   原型搜索机制

 

1.别忘了默认的原型:所有函数的默认原型都是Object的实例。

 

2.确定原型和实例的关系:instanceof    isPrototypeOf()

 

3.谨慎地定义方法:必须在实例替换原型之后才能定义新的方法。

 

4.原型链的问题:

 

在原型外的属性也给继承了

 

在创造子类型的实例时,不能向超类型的构造函数中传递参数。

 

很少单独使用。

 

6.3.2借用构造函数 利用callapply 来继承和传递参数  但是只能使用构造函数模式。

 

也很少单独使用。

 

6.3.3组合继承

 

原型链实现 原型属性和方法的继承

 

借用构造函数实现 对实例属性的继承

 

最常用的继承方式

 

6.3.4原型式继承(看书)  

 

没有用到构造函数 保持类型可以用用,但是会跟原型模式一样共享引用类型的属性。

 

6.3.5寄生式继承(看书)

 

不考虑构造函数 可以用用  但是不能做到函数复用

 

6.3.6寄生组合式继承(看书)

 

组合继承有问题:调用了两次超类型的构造函数,导致实例和原型中重复了属性。

 

寄生组合式继承解决了这个问题,成为了最理想的继承范式。

 

 

第七章 函数表达式

定义函数方式:

 

函数声明( 函数声明提升 有name)   

 

函数表达式( name为空 匿名函数/命名 一般函数表达式都是匿名函数 )

 

7.1递归

 

严格模式不能用 arguments.callee  可以用命名函数表达式。

 

 

7.2闭包:有权访问另一个函数作用域中的变量的函数

 

自我总结:闭包是函数,一般用匿名函数

 

1.闭包可以访问返回外部函数中的变量。

 

2.另一个函数的活动对象会被保存,直到闭包的作用域链被销毁。

 

7.2.1闭包和变量  

 

副作用:闭包的作用域链上保存的是整个变量对象,所以返回的变量是保存的最后一个值。

 

比如在for循环中,则会出现不如意的情况。

 

7.2.2关于this对象

 

闭包中的this对象,闭包可能在某些特殊情况被放到全局对象上,从而this变却不自知。

 

7.2.3内存泄漏

 

使用闭包,确保正常回收内存

 

 

7.3模仿块级作用域

 

用匿名自执行函数来模仿。

 

自我总结作用:

 

1.内部执行完就会摧毁。

 

2.匿名自执行函数可以减少污染全局方法和属性。

 

闭包就有一个内存的问题,用这个结合很舒适。

 

 

7.4私有变量

 

对象上的都是公有的    函数里面的都是私有的

 

通过闭包来创建函数的公有方法(特权方法)    ---------用来获取私有变量

 

在构造函数中创建                         -------- 构造函数this   浪费内存

 

例子:this.****** = function(){ **** };

 

但是每个实例化都会重新构建一组方法,浪费。

 

 

7.4.1静态私有变量                   ---------原型   每个实例没有自己的私有属性

 

静态就用  私有作用域   通过闭包在全局的构造函数的原型里面来创建特权方法。

 

增进了代码的重用性,但是每个实例没有自己的私有变量。(因为这个叫静态私有变量)

 

使用实例变量,还是静态私有变量,看具体需求。

 

 

7.4.2模块模式                     ---------return返回对象字面量    一个实例对象

 

为单例创建私有变量和特权方法(单例:只有一个实例的对象)

 

在匿名函数内部定义私有变量和方法,然后将一个对象字面量作为函数的返回值。

 

 

7.4.3增强的模块模式

 

必须是某种类型的实例,同时还必须添加某些属性或方法。

 

Atas ialah kandungan terperinci JavaScript高级程序设计介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 pm 02:54 PM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Hubungan antara js dan vue Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.

See all articles