JS知识点补充

Posted 煜成'Studio

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS知识点补充相关的知识,希望对你有一定的参考价值。

JS知识点补充

1如果你要改一个数组的其中一个值是能改的,但是字符串是不能单独修改其中的值的

//数组
let arr = [1, 2, 3];
arr[1] = 1;
console.log(arr); //[ 1, 1, 3 ]
//字符串不能修改
let arr = 'hello';
arr[1] = 1;
console.log(arr); //hello

2在函数形参中对对象解构赋值同时也需要添加默认值的时候,注意以下

//对象的结构赋值
let obj = name: 'nodejs', age: 11;
function func(name, age) 
    console.log(name, age);

func(obj); //nodejs 11

//没有传入实参会报错
function func(name, age) 
    console.log(name, age);

func(); //报错

//没有传入实参,但是相当于添加了默认值undefined
function func(name, age = ) 
    console.log(name, age);

func(); //undefined undefined

//**********
//没有传入实参,但是分别添加了默认值,注意name = "nodejs", age = 11是添加默认值而不是一个对象
//形参中必须这样写name = "nodejs", age = 11 = ,相当于之前先添加默认值undefined,然后又分别把默认值改为了'nodejs'和11
//只这样写name = "nodejs", age = 11会报错,因为这样写既不是对象的格式,也不是对象添加默认值的样式
function func(name = "nodejs", age = 11 = ) 
    console.log(name, age);

func(); //nodejs 11

3箭头函数中,函数体只有一个语句可以省略大括号,这种化简的写法是会返回一个值,给到函数的调用结果

let func = x1 => console.log(x1);
let ret = func(10); //获取这个函数的返回值,因为console.log的执行结果就是undefined,
//运行完之后相当于return undefined
console.log(let); //undefined

let func2 = () => 999 + 1;
let ret2 = func2();
console.log(ret2); //1000,这个有返回值
//let func2 = () => 999 + 1;这条语句相当于let func2 = () => return 999 + 1;

如果函数体里只有一个语句且其返回值是一个对象,不能用简写的方式,因为大括号是函数体的还是对象的意义不明,会报错

4this的指向问题

function People(name, age) 
	this.name = name;
	this.age = age;
	this.say = function() 
		console.log(this.name); //this指向调用者
	

let p1 = new People("zhangsan", 18);
p1.say(); //zhangsan

function People(name, age) 
	this.name = name;
	this.age = age;
	this.say = function() 
		setTimeout(function() 
			console.log(this.name); //定时器里的function是一个新开辟的局部作用域,有自己的作用域,所以this指向丢失
		, 1000)
		
	

let p2 = new People("zhangsan", 18);
p2.say(); //undefined

//之前用这种方式
function People(name, age) 
	this.name = name;
	this.age = age;
	this.say = function() 
		let _this = this;
		setTimeout(function() 
			console.log(_this.name); 
		, 1000)
		
	

let p2 = new People("zhangsan", 18);
p2.say(); //zhangsan

//也可以使用箭头函数,箭头函数没有自己的作用域,它的作用域和外层是相同的
function People(name, age) 
	this.name = name;
	this.age = age;
	this.say = function() 
		setTimeout(() => 
			console.log(this.name); 
		, 1000)
		
	

let p2 = new People("zhangsan", 18);
p2.say(); //zhangsan

//在DOM操作中也可能遇到这种情况
let oDom = document.getElementById("odiv");
oDom.onclick = function() 
	setTimeout(function() 
		this.style.width = "500px"; //会出现问题
	, 1000)


//可以使用箭头函数进行修改
let oDom = document.getElementById("odiv");
oDom.onclick = function() 
	setTimeout(() => 
		this.style.width = "500px";
	, 1000)


//如果是以字面量形式创建的对象,不适合书写箭头函数
let obj = 
	name: "nodejs",
	age: 11,
	say: () => 
		console.log(this.name);
	

obj.say(); //undefined,因为箭头函数this指向外层,这里指向的是Windows,而不是指向obj
//所以要用之前常用的写法
let obj = 
	name: "nodejs",
	age: 11,
	say: function() 
		console.log(this.name);
	

obj.say(); //nodejs

5ES6中创建类中constructor是什么时候执行的?

创建对象的时候执行的/实例化的时候

class Animal 
	constructor(name) 
		this.name = name;
	
	showName() 
		...
	

let dog = new Animal("小白");

6ES5中的静态方法,ES6的形式也需要掌握

//定义类
function Animal(name) 
	this.name = name;

//给类的实例定义方法,通过实例调用
Animal.prototype.showName = function () 
	console.log(this.name);

//给类定义静态方法,必须通过类来调用
Animal.eat = function () 
	console.log("进食");

//根据函数实例化对象
var a = new Animal("Tom");
//调用对象的方法
a.showName();
//调用类的静态方法
Animal.eat();

实例属性和实例方法都是给实例对象去调用的;

每一个实例对象在内存中是独立的,各自用自己的属性和方法;

let dog = new Animal(“小白”);左右哪些事情?1创建了新的对象2调用了constructor方法并传入对应的参数3把这个对象的指向给到dog标识符这个内存空间;

因为上条第3点中传入参数并执行了constructor方法,所以新对象才有了这些属性。

静态方法是通过类名来调用的

在类中,某个方法如果不用到this,我们可以理解为这个方法就不是给实例用的,可以设置为静态方法

//静态属性
//在ES6中静态方法是在class中用static来定义的,但是不能用static来定义静态属性,typeScript可以这样定义,而ES6中要是想定义静态属性,可以在class Animal类外面用Animal.num = 10;这样来定义
//ES6中静态方法也可以通过类的extends继承拿到

7在类的继承中如果子类有和父类相同的方法名,子类实例调用该方法时调用的是子类的方法(这就叫做重写),同理当子类中没有constructor时,子类可以调用父类的属性,但是子类中有constructor的时候,相当于重写了,此刻子类实例只能调用子类的constructor里的属性,如果想要调用父类的属性,需要用super()调用回父类的constructor,父类中constructor()需要的形参在super()中传入,在创建子类对象的时候需要传入实参,所以子类的constructor中需要相应的形参,通过子类的constructor形参传递到super中的参数,再调用回父类的constructor中;子类中的this是在调用super方法之后才起作用,所以super要放在constructor内的第一行位置

8一个js文件就是一个模块,提高代码的可维护性,其次可以复用,编写代码不必从零开始,还可以避免函数名和变量名冲突,模块化主要是方便项目的开发和维护

模块的作用域是私有的,内部定义的变量或者函数,只有当前的文件/模块可以使用,其他模块需要使用的话,以CommonJS的Modules规范:Nodejs为例,需要导出exports或者module.exports,导出的时候,以对象的方式进行导出,在要用的模块内,需要先引入导出的那个模块,使用require引入,引入后需要用一个变量来接收导入的对象。

模块化定义规范:

AMD规范: Require.js

CMD规范: Sea.js

//AMD和CMD是Nodejs出来之前使用的老的规范

CommonJS的Modules规范: Nodejs

ES6模块化规范

以上是关于JS知识点补充的主要内容,如果未能解决你的问题,请参考以下文章

JS知识点补充

JS知识点补充

JS知识点补充

JS 知识点补充

JS知识点补充

Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数