ES5学习

最新推荐文章于 2022-08-10 11:05:01 发布

置顶青柠知秋

最新推荐文章于 2022-08-10 11:05:01 发布

阅读量612

点赞数

分类专栏： js 文章标签： js ES5

本文链接：https://blog.csdn.net/zbl744949461/article/details/88798457

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.

1.javascript是什么

2.API 应用程序接口（Application Programming Interfaces）

(3). 构造函数是函数，用构造函数新建的实例是对象

了一圈捷径，最后发现，还是得踏踏实实一步一步走。

https://wangdoc.com/javascript/basic/index.html

一.

1.javascript是什么

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript

javaScript是动态类型语言，它植根于全球数亿网民都在使用的Web浏览器之中，致力于增强网站和Web应用程序的交互性。

所谓的动态类型语言，意思就是类型的检查是在运行时做的，比如如下代码是不是合法的要到运行时才判断。

https://baike.baidu.com/item/动态语言/797407?fr=aladdin

2.API 应用程序接口（Application Programming Interfaces）

API通常分为两类，浏览器 API 和 第三方 API

用js操作dom树来与html页面进行交互，基本都是通过web API接口实现的。

3.脚本调用策略

分‘内部’策略和‘外部’策略

内部是在程序里写js代码，外部是指引用js文件。

内部：用事件监听

外部：用async和defer 这2个对内部不起作用。

async是和html同时加载代码

defer是推迟加载

举例：在body中，内部打印“0”，外部分别打印1到5，控制台打印顺序如下，只有js2被推迟到最后。

4.保留字

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords

https://www.runoob.com/js/js-reserved.html

5.运算符的完整列表及其优先级

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence

6.可重复代码块——函数

当遇到经常需要执行的代码，将其写成函数。

函数允许你在定义的区块内存储一段代码用来执行一个单独的任务，然后调用该段代码时，你需要使用一个简短的命令，

而不用重复编写多次该段代码。

方法：方法是在对象内定义的函数。

浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。

函数：是单独定义的？

当引用的2个js文件都定义了同一个函数，将执行最后加载的文件中的函数。

js 严格模式 'use strice';

7.立即执行函数

等于函数 a(){} 加上() 再加上执行符号！，+，-，=， && ，|| 以及逗号（,）操作符都可以讲函数体变成函数表达式

就是 ！a(){}() 这样三部分组成

8.构造器

(1). 构造器基础

function Abc(){

this.ee = 5 ;

}

Abc.prototype.ddd= function(){console.log(this.ee);}

函数Abc就是构造器，只有函数对象有prototype属性。

Abc()函数是Abc.prototype的构造函数，也就是说 Abc === Abc.prototype.constructor。

它的prototype，就是原型。一般所有的方法都定义在构造器的原型上。

但这样写，直接调用Abc.prototype.ddd()执行方法是不行的，因为this是函数？Abc.prototype是this？

新建实例Fg，这样可以，因为方法可以通过__proto__属性上溯原型链使用了。

var Fg = new Abc();

Fg.ddd();

new 这个动作，是把Abc函数返回一个名叫Abc的对象，赋给Fg ?

并不是，应该是引用，因为当构造函数的原型上的属性增加方法，Fg 也可以使用的。

实际的方法仍然是定义在类里面，而不是在对象里面。

如果原型上有方法，对象可以调用，如果在调用后，该方法被删除，再次调用会失败。

并不是最后定义，对象在定义前能调用。增加属性并没有优先级。

但在console.log()时，显示的都是最终结果。并不会根据添加删除顺序显示。

delete Abc.prototype.ddd；

(2). 构造器中有return

function Bcd(){

this.ss = "SSR";

return 123；

}

Bcd.prototype.test1 = function(){

console.log(456);

}

如果return的值是基本数据类型的话，则忽略return，直接返回实例化的对象；

如果return的值是引用类型的话，则不再返回实例化的对象，而是直接返回return返回的引用类型的值。(就不是实例化了)

中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。

还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，String有些特殊。

(3). 构造函数是函数，用构造函数新建的实例是对象

typeof Abc 是 function ；

typeof Fg 是 object ；

function在prototype上定义的方法，在object的__proto__属性中，可以直接使用。例：Fg.ddd()；

而构造函数在原型上的属性，不能直接使用，需要加上.prototype 例：Abc.prototype.ddd()；

构造函数在prototype上的constructor中存放构造函数。

9.继承

构造器的继承和原型的继承

(1).构造器的继承，使用call函数

(2).原型的继承，使用create方法

(3). 现在Teacher()的prototype的constructor属性指向的是Person(),执行以下代码，将原型中的构造器改为正确的指向。

在定义新的构造函数Teacher时，我们通过function.call来调用父类的构造函数，

但是这样无法自动指定Teacher.prototype的值，这样Teacher.prototype就只能包含在构造函数里构造的属性，而没有方法。

因此我们利用Object.create()方法将Person.prototype作为Teacher.prototype的原型对象，并改变其构造器指向，

使之与Teacher关联。

10.字面量

理解起来，就是数据类型的表达形式，比如用双引号引起来的就是字符串，而不是别的类型。

https://www.cnblogs.com/radius/p/6874165.html

(1). 数字的字面量，就是这个数字自己 //9

JavaScript中，数字的字面量可以有三种进制：

10进制：普通的数字就是十进制

8进制：如果以0开头、或者以0o开头、或者以0O开头的都是八进制，八进制只能用0~7来表示

16进制：如果以0x开头的都是十六进制。

小数的字面量也很简单，就是数学上的点。计算机世界中，小数称为“浮点数”。

允许使用e来表示乘以10的几次幂 //5e5 500000

Infinity 无穷大

NaN 英语全名叫做not a number，不是一个数。比较哲学的是，这个“不是一个数”是一个数字字面量。

(2). 字符串，用双引号、单引号包裹起来。字符串被限定在同种引号之间；也即，必须是成对单引号或成对双引号。

转义字符，\n 回车换行 \t tab缩进

正常情况下，引号内部可以有不同种的引号，比如双引号里面可以有单引号 // "老师说你像'考拉'一样漂亮"

可以用转义字符，转义引号，或转义自己 // "老师说你像\"考拉\"一样漂亮" // "c:\\a\\b.jpg"

(3). 数组 [ ]

(4). 对象 { }

与字面量创建不同的是，用构造函数创建，例如 new Object() new Array()

用字面量比用构造函数好的地方是，构造函数不知道有没有被修改过。

11.对象

(1). 创建对象的4种方法

① 声明一个对象的语法

var a = {}；

var b = { name:"Bob", age:18}；

② 使用自定义构造函数

var Fg= new Abc()；

③ Object() 构造函数

var c = new Object()；

var d = new Object({
   name : 'Chris',
     age : 38,
     greeting : function() {
      alert('Hi! I\'m ' + this.name + '.');
      }
   })

这样创建的是没有名字的对象？用自定义的构造函数实例化的实例是有名字的对象？

④ create() 方法

var Fg2 = Object.create(Fg);

问题

1.对象的属性取出有2种方法？

2.数组

3.字符串中可以包含一个引号，不然，就用转义字符

4.push方法可向数组末尾添加1个或多个元素，并返回新的长度。

pop方法删除数组最后一个元素，并返回被删除的元素。

unshift和shift方法同push和pop方法，他们作用与数组的开头。

5.value都可以取谁的值？input？p?

http://www.w3school.com.cn/jsref/prop_attr_value.asp

6.定义变量没赋值和没定义变量

7.toString()既能把数字转化成字符串，也能把数组转化为字符串。

8.replace()只能替换字符串中找到的第一个要替换的字符，并替换。并不是把所有能找到的都替换了。要想替换所有，可以与

indexOf()配合循环替换下。

9.字符串分割成数组split(',') 和数字变成字符串 join(',') toString()

10.赛选数组的3种方法

、

(1).先筛选分组，后处理末尾

(2).定义j=0,k=0 在循环时，遇到不欢迎的，j++，欢迎的 k++ 当是Phil或Lola j==2时，末尾加。当k==length-2时，末尾加。

(3).用join()把它变成字符串，replace(",Phil","") 再 replace(",Loal","") 拒接名单，在join()后indexOf(Phil),如果有就添加，同理。

11.值变化事件怎么用

https://developer.mozilla.org/zh-CN/docs/Web/Events

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Events/ValueChange

12.事件冒泡事件捕获事件委托 https://davidwalsh.name/event-delegate

事件监听 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

关于阻止冒泡，在触发事件的元素父项有绑定事件时，需要阻止冒泡，如果父元素没有绑定事件，就不用阻止冒泡。

event.stopPropagation();

13.判断任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（''）在作为条件语句进行测试时实际返回true。

14.switch(true){} 一定要写break

例1：这是个失败的例子，因为没有写break，开始以为可以一直判断下去，但是错了，除了第一个判断，

其他的判断都被忽略了，只是一直向下执行，打印出的数组有5个值。结论，break是必须的。

把break换成continue也是错的。

var fruits =  "applebananapairorange";
var toF=[];
(function(){
    switch(true){
        case fruits.indexOf("apple")>=0 :
            toF.push("apple");
        case fruits.indexOf("banana")>=0 :
            toF.push("banana");
        case fruits.indexOf("case")>=0 : 
            toF.push("case");
        case fruits.indexOf("pair")>=0 :
            toF.push("pair");
        case fruits.indexOf("orange")>=0 :
            toF.push("orange");
    }
    console.log(toF);
})();

例2：这样用比用if else 看着简洁

var num = 25;
switch (true) {
    case num < 0:
        alert("Less than 0.");
        break;
    case num >= 0 && num <= 10:
        alert("Between 0 and 10.");
        break;
    case num >= 10 && num <= 20:
        alert("Between 10 and 20.");
        break;
    default:
        alert("More than 20.");
}

15. 清除元素中的DOM元素向元素添加DOM元素设置元素的内容

list.innerHTML = '';

ist.appendChild(listItem);

listItem.textContent=''

16. for循环 break巧用

如果不论结果是什么，都会在p元素中输入一个结果。

这里每次循环都会在p里输入找不到，直到找到，输入找到的值，结束循环。

这里的else是不是写的很多余？不用写else{}，直接在后面加else中的内容