js高级参考文档

javascript特点:

1 解释执行 解释一行执行一行 慢; 编译执行 一次性把代码编译成可执行的代码,然后再一行一行执行 快; 2 灵活 动态特性 可以随意给对象增加属性和方法; 3 头等函数 函数在JavaScript一等公民; 4 执行环境 宿主环境;

对象:内存中的一片区域,包含数据和代码;属性和方法;

面向对象:设计程序的思路。
研究如何把现实世界中的实际存在的东西,使用代码的形式表现出来。

三大特点:封装,继承,多态(抽象);

面向对象的方式:
创建一个模板,用于创建对象(实例instance);
在JavaScript中创建对象的模板是构造函数;

创建对象:
1:new Object();
2:var hero = {};对象字面量;
3:工厂函数创建多个函数;
4:构造函数;

构造函数:
名字第一个字母大写;
1 会在内存中创建一个空对象;
2 设置构造函数的this,让this指向刚刚创建好的对象;
3 执行构造函数中的代码;
4 返回对象;
5 无法使用typeof获取对象的具体类型;
6 获取对象的具体类型 : .constructor ;
7 判断某个对象是否是某个构造函数的实例/对象:instanceof ;

实例成员:(对象成员)跟对象相关的成员,将来使用对象的方式来调用;

静态成员:属于构造函数对象的成员属性或成员方法;

原型:通过原型创造的方法,所有构造函数创建的对象都是可以访问的;
.prototype (每一个构造函数都有一个属性,原型对象);
Student.prototype.sayHi = function () {
console.log(‘大家好,我是’ + this.name);
} ;

当调用对象的属性或者方法的时候,先去找对象本身的属性/方法 ,如果对象没有该属性或者方法。此时去调用原型中的属性/方法;如果对象本身没有该属性/方法,原型中也没有该属性或者方法,此时会报错;

在原型对象中有一个属性 constructor 构造函数;
constructor作用:记录了创建该对象的构造函数,记录了创建该对象的构造函数;

关系:构造函数 原型对象 实例/对象s1.proto 之间的关系
构造函数拥有原型对象,
通过构造函数创造实例对象,每个对象都会有一个原型属性(.proto ),这个原型属性就指向了这个构造函数的原型对象,原型对象中有一一个constructor属性,这个constructor属性就会指回它所在的构造函数,我们通过构造函数创造的这个对象,它里面也有一个(.proto )属性,每一个对象都有__proto__ 的属性,这个属性就指向了构造函数的原型对象;

原型链:
每一个对象都有__proto__ 的属性;原型对象的__proto__ 指向得是object对象;
原型对象的原型对象指的是null;
如果对象本身就有原型方法,就近调用;

注意点:
一般情况下,对象的属性在构造函数中来设置,对象的方法在构造函数的原型对象中来设置,当我们改变构造函数的prototype的时候,需要重新设置constructor属性,使用对象访问原型对象中的constructor 是创建对象所使用的构造函数,先去设置原型属性,再创建对象,才可以访问原型对象中的成员;
Student.prototype = {
constructor: Student,
sayHi: function () {
console.log(‘sayHi’)
},
eat: function () {
console.log(‘eat’);
}
};

render:渲染;

bind:
新建一个方法,bind中的第一个参数可以改变函数中的this的指向;通过bind会返回一个新的函数;
bind并没有调用方法;
var a = 123;
function fn() {
console.log(this.a);
}
window.fn();//123
var o = {a: ‘abc’};
var fn1 = fn.bind(o); 就等于把window的fn方法绑定给了变量o,也就是 o.fn(),然后被新变量fn1接收
fn1(); //abc 相当于 o.fn();也就是window.fn();

自调用函数:
;(function(window,undefined){
console.log(xx)
})(window,undefined)
前面必须加分号,避免两个自调用函数结合;
传入window和undefined两个参数的目的,是让变量名可以被压缩;

继承:
复制对象的成员给另一个对象
for (var key in wjl) {
// 不给wsc复制同名的属性
if (wsc[key]) {
continue;
}
wsc[key] = wjl[key];
}

原型继承:
继承:类型和类型之间的关系;
继承目的: 把子类型中共同的成员提取到父类型中,代码重用;
原型继承: 无法设置构造函数的参数;

改变函数中this指向:
call() :在传递参数时是传递的一个参数列表;
1: 改变函数中的this,直接调用函数;
2: 第一个参数是改变this的指向,后面的参数是属性;
3:call的返回值就是函数的返回值;
fn.call(obj, 5, 6);(调用谁就把谁写在.call前面);
用途:所有对象的方法通过call都可以直接拿来用;
点前面是 被调用的函数 ,第一个参数是要调用函数的那个对象

apply(): 在传递参数时,接收的是一个数组;会把数组拆开传递;
	 只有两个参数
		1: 调用函数,改变函数中的this;
		2: 第一个参数  设置函数内部this的指向;
	  	    第二个参数  是数组;
		3: 函数的返回值 apply的返回值就是函数的返回值;
	fn.apply(obj, [1, 2]);
	用途:通常用于数组的解包;

bind(): 
		1: 改变函数中的this,不会调用函数,而是把函数复制一份;
		2: 第一个参数 设置函数内部this的指向;
	    	    其它参数,对应函数的参数;
		3: 函数的返回值 call的返回值就是函数的返回值;
	var f = fn.bind(obj, 5, 5);
		f();
	用途:在函数中的函数,如果要使用外层函数中的this时,可以在里层函数最后面加上bind(this),这样在里层函数中就可以使用外出层函数的this对象;

借用构造函数:
函数对象执行call方法,传入一个对象,作用就是把当前函数作为对象的一个方法直接调用;

组合继承:
借用构造函数 + 原型继承;
function parent(父形参){
this.属性 = 父形参;
}
parent.prototype

函数的定义:
在老的IE版本中,if语句中的函数声明也会提升;
1 函数声明
function fn() {
console.log(‘test’);
}
fn();

 2 函数表达式
		var fn = function () {
		console.log('test');
		};

3 new Function()
	函数也是对象
	var fn = new Function('var name = "张三";console.log(name)');
		fn();

函数调用方式:
// 1 普通函数调用 this指向window
// function fn() {
// console.log(this);
// }
// window.fn();

// 2 方法调用     this指向调用该方法的对象
// var obj = {
//   fn: function () {
//     console.log(this);
//   }
// }
// obj.fn();

// 3 作为构造函数调用   构造函数内部的this指向由该构造函数创建的对象

// 4 作为事件的处理函数   触发该事件的对象
// btn.onclick = function() {
//   console.log(this);
// }  

// 5 作为定时器的参数   this指向window
// setInterval(function () {
//   console.log(this);
// }, 1000);

总结:函数内部的this,是由函数调用的时候来确定其指向的;

函数内部有一个私有变量:arguments;当函数的参数个数不固定的时候,在函数内部,可以通过arguments获取到实际传过来的参数;

高阶函数:
1 函数作为参数:

2 函数作为返回值的时候:	

闭包:
有两个作用域,在里层作用域中如果要使用外层作用域的变量,这个变量就不会随着外层作用域的销毁而销毁,而是为里层作用域保留一段时间,直到外层作用域执行完成后,才销毁,外层的变量和里层的函数就一起构成了闭包;

递归:
函数自己调用自己;一般都要写一个结束的条件;
案例:
用递归来实现 1 + 2 + 3 + 4 + … + n
function getSum(n) {
// 递归结束的条件
if (n === 1) {
return 1;
}
return n + getSum(n - 1);
}

		console.log(getSum(3));
	第一次执行的时候 n=3 ,也就是 3+getSum(3 - 1),但是getSum(3 - 1)是个调用函数,会再次执行调用,同时此次函数还得到保留, 此时getSum里已经是2了,也就是n=2,会再次执行函数,也就是2+getSum(2-1);这是getSum里面 的n已经是1了,然后再次执行,n=1满足判断条件就向上返回1,也就是2+getSum(2-1),这里(2-1)可以看做n;最后一次的返回值是1,那么2+getSum(2-1)也就是2+1;然后最后一次的执行就会释放不再保留,现在的返回值也就是2+1,会返回给3+getSum(3 - 1);也就是3+2+1,所以最后返回值为6;

对象的拷贝:
封装函数 - 把o1 的成员,复制给o2
function copy(o1, o2) {
for (var key in o1) {
o2[key] = o1[key];
}
}
copy(obj1, obj2);

浅拷贝:只拷贝对象的第一层属性,如果修改被拷贝的对象,复制后的对象的值修改后不会变,方法会变;
深拷贝:拷贝对象的多层属性,

正则表达式:
作用:对字符串进行处理;
元字符:
\d 匹配数字;
\D 匹配除了数字以外的字符(空格,符号);
\w 数字 字母 下划线(不包括汉字);
\W 除了数字 字母 下划线;
\s 匹配空格和换行;
\S 除了空格和换行;
. 匹配到任意的单个字符(不包括换行);
^ 以谁开始;
$ 以谁结尾;
限定符:
\d* 限定前面的字符出现零次和多次(几个都行);
\d+ 限定前面的字符出现一次和多次;
\d?限定前面的字符出现零次和一次;
\d{n} 匹配前面的字符出现n次;
精确匹配 ^\d{n}KaTeX parse error: Expected 'EOF', got '\d' at position 11: ; n位数字; \̲d̲{n m} 匹配前面数字至少出…; n位到m位之间;
\d{n, }匹配前面数字至少出现n次,多次不限;
精确匹配 ^\d{n,}; 至少n位;
特殊字符:
[a-c] 匹配a到c的字符;
[^ ] 匹配除了中括号里面的所有字符;
\ 转义符;
(a|b) a 或者b;
使用:
RegExp();第一个参数:模式;第二个参数:i 忽略大小写 g 全局匹配;
创建对象的方式:
var xxx = /ab[a-z]/i;
.test:匹配;
.onkeyup 键盘弹起;
.onchange 发生改变;
.onblur 失去焦点;
.exec 提取;(提取一个)
.match 提取:(提取多个)
.replace 替换;
.split 切分成数组;
.search
分组提取:RegExp($1),RegExp($2)…

猜你喜欢

转载自blog.csdn.net/weixin_44260420/article/details/93721631