ES5基础语法

article/2025/10/20 17:45:52

一.类与对象

  class father {that = this;constructor(uname, age) {this.uname = uname;this.age = age;}sing(song) {console.log(this.uname + song);}}class son extends father {constructor(uname,age) {super(uname,age);this.uname=uname;this.age = age;}sing(song){console.log(super.sing('我不会唱')+song);}}var idm = new people('liang',13);idm.sing('bingyu');

里面的super关键子非常重要,
它代表父类里面的构造函数(相当于调用constructor),另外super还可以调用父类里面的方法,注意的是super必须写在this的前面,否则会报错.

在写程序的时候可以在类下面写 that =this 赋值this, 解决后续指向问题

二 . 原型的理解

原型指的就是对象,作用是类方法共享.
主要是节约内存
prototype 原型对象

__proto __对象原型
在这里插入图片描述

    function star(uname, age) {this.uname = uname;this.age = age;}star.prototype.sing = function () {console.log("djijfiosnedfoi");}var li = new star('li', 68);li.sing();console.log(li);

在这里插入图片描述
原型对象的应用扩展内置对象方法

call呼叫函数

function fn(x,y) {console.log('lalalla我是卖报的小当家');console.log(this);console.log(x+y);console.log("=================")}var o ={name:'andy'};//调用函数 ,此时this指向windowfn.call();//修改this指向fn.call(o,1,3);

在这里插入图片描述

 function father(name, age) {this.name = name;this.age = age;console.log(this);}function son(name,age,score) {// this指向son ,通过call把父类this指向子类thisfather.call(this,name,age);console.log(score);}var li = new son('li',18,100);

在这里插入图片描述通过改变原型对象指向,来继承父类

function father(name, age) {this.name = name;this.age = age;console.log(this);}function son(nmae,age,score) {// this指向son ,通过call把父类this指向子类thisfather.call(this,name,age);console.log(score);}son.prototype = new father();son.prototype.constructor = son;son.prototype.exam = function () {console.log('孩子要考试');}var li = new son('li',18,100);li.exam();

在这里插入图片描述

foreach 数组遍历 es5新语法 return不会终止遍历

 var arr = [1,2,3];var sum =0;arr.forEach(function (value,index,array) {console.log('每个元素:'+value);console.log('每个数组:'+index);console.log('数组本身'+array);sum += value;})console.log(sum);

filter数组过滤

 var arr = [12, 44, 33, 34];var sum = 0;var newarr = arr.filter(function (value, index) {return value >= 20;})console.log(newarr);

在这里插入图片描述
some()函数查找元素 ,数组中存在就返回true

 var arr = [12, 44, 33, 34];var flag = arr.some(function (value) {return value == 12;})console.log(flag);

object.keys(map) 获取对象的key值并保存到数组中

str.trim()去掉字符串两端空白字符

object.defineProperty(map,'prince',{writable :true, //允许修改prince值value:999 ,  //改变price的值})

在这里插入图片描述
delete.obj.key //删除键和值

六种函数及调用

   //1.普通函数 指向windowfunction fn() {console.log('普通函数'+this);}//调用fn.call();//2.对象函数  this指向ovar o = {say: function () {console.log('对象函数'+this);}}//调用o.say();//3构造函数   指向实例对象function star() {console.log("3构造函数");}//调用new star();//4.绑定事件函数   this 指向的是函数调用者btn.onclick = function () {}//5.定时器函数 this 指向windowsetInterval(function () {},1000);//6.立即执行函数 ,自动调用  this 指向window(function () {})();

apply(obj.[]) 可以点用函数,也可以改变this指向

  var arr = [1,34,54,123,65,34];var max = Math.max.apply(Math,arr);console.log(max);

在这里插入图片描述
bind()函数用法

不调用原函数,但返回一个新函数

在这里插入图片描述
bind()最重要的用法

 var btn = document.querySelector('button');btn.onclick = function () {this.disabled = true;setTimeout(function () {this.disabled =false;}.bind(this),2000);}

开启严格模式
在这里插入图片描述注意:
严格模式下不能随便删除定好的变量

高阶函数
在这里插入图片描述
闭包是一个函数,能够访问另一个函数里面的变量. 作用是延伸了变量的作用域的范围

思考:

在这里插入图片描述

递归函数: 自己调用自己

 //斐波拉契数列function fb(n) {if (n == 1 || n == 2) {return 1;}return fb(n - 1) + fb(n - 2);}console.log(fb(3))

深拷贝浅拷贝

在这里插入图片描述

jquery里面的 extend

$.extend(true,o,arr);  //深拷贝$.extend(false,o,arr);  //浅拷贝

原生js写法

    function copy(target,obj) {//浅拷贝for (var item in obj){target[item] = obj[item];}}或者
Object.assign(o, arr);

  //浅拷贝var arr = {age: 68,name: 'liang',msg: {id: 90},color: ['red', 'green']};var o = {};function deepcopy(target, obj) {for (var k in obj) {var item = obj[k];//判断属性值 是否是一个数组if (item instanceof Array) {target[k] = [];deepcopy(target[k], item);}else if (item instanceof Object) {//判断属性值 是否是一个对象target[k] = {};deepcopy(target[k], item);} else {target[k] = item;}}}deepcopy(o, arr);console.log(o);o.msg.id = 80;console.log(arr);