JavaScript（二）

1.创建类和生成实例

// (1)我们类里面所有的函数不需要写function
//(2)多个函数方法之间不需要添加逗号分隔

// 1.创建类class
创建一个明星类
class Star {                   //类的共有属性放到constructor 里面
constructor (uname, age) {
this.uname = uname;
this.age = age;
}
sing(song){
    console. log(this.uname+song) ;
}
}
// 2.利用类创建对象new
var 1dh = newStar('刘德华'， 18);
var zxy = new Star('张学友'，20);
ldh.sing('冰雨')

2.继承 继承中的属性或者方法查找原则:就近原则

extends super也可以调用父类的普通函数，super要放在this.x之前。

class Father {
constructor(x, y) { 
this.x=x;
this.y=y;
}
sum() {
console.1og(this.x + this.y);
}
class Son extends Father {
constructor(x, y) { 
super(x, y); //调用了父类中的构造函数
}
var son = new Son(1, 2);
son. sum();

3.

class Star {
constructor(uname, age) {
that=this；
this . uname = uname ;//constructor里面的this指向的是创建的实例对象，方法里面的this指向这个方法的调用者
this.age = age;
this. sing();
this.btn = document . querySelector ( ' button ' );
this.btn. onclick = this.sing;//添加一个按键。要加this.sing，this.sing不能加（），否则这个按键没点击就会执行sing函数
}
sing() {
    console.log(this);// 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数

    console.log(that.uname); // that里面存储的是constructor里面的this
}
}
var ldh = new Star ('刘德华' );//实例对象就会调用sing方法
//类里面的共有的属性和方法定要加this使用

4.利用构造函数创建实例成员，静态成员，构造函数存在浪费内存的问题。

Star.sex ='男' ;
//静态成员只能通过构造函数来访问，实例成员只能通过对象访问
console.1og(Star.sex);
console.1log(ldh.sex); //不能通过对象来访问

一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上

function Star(uname, age) {
this.uname = uname ;
this.age = age;
// this.sing = function() {
//
console.log('我会唱歌');
// }
}
Star . prototype.sing = function() {
console.1og( '我会唱歌' );
}

Star . prototype = {
//如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor
指回原来的构造函数
constructor: Star,
sing: function() {
console.log('我会唱歌' );}
movie: function() {
console.log( '我会演电影');
}
}

 原型对象函数里面的this指向的是实例对象ldh

 call() 可以改变这个函数的this指向此时这个函数的this就指向了o这个对象
fn.call(o);

JavaScript规定,每一一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。

5.es5新增加方法 

 forEach 迭代(遍历)数组

var arr = [1, 2, 3];
arr . forEach(function(value, index, array) {
console.1og('每个数组元素' + value);
console.log( '每个数组元素的索引号’ index);
console.1og( '数组本身+ array);
})

 filter 筛选数组,filter forEach里面return不会终止迭代，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var arr = [12, 66, 4, 88];
var newArr = arr . filter (function(value, index) {
//return value >= 20;
return value%2===0;
});
console.1og(newArr);

 some查找数组中是否有满足条件的元素返回的是布尔值，找到就停止,在some里面遇到return true 就是终止遍历迭代效率更高

vararr=[10,30,4];
var flag = arr. some (function(value) {
// return value >= 20; 
return value < 3;
});
console .1og(flag);

 trim方法去除字符串两侧空格

var str =  andy
console.1og(str);
var str1 = str. trim( ) ;
console .1og(str1);

6.1. Object.keys( 用于获取对象自身所有的属性)      Object . keys (obj)

    2. Object.defineProperty0 定义新属性或修改原有的属性。

Object . defineProperty (obj, prop, descriptor)
Object.defineProperty0第三个参数descriptor说明:以对象形式{}书泻
●
value:设置属性的值默认为undefined
●writable: 值是否可以重写。默认为false
●enumerable: 目标属性是否可以被枚举。默认为false
●configurable: 目标属性是否可以被删除或不允许在修改第三个参数里面的特性(比如之前设置了writable为false，则不能修改为true)默认为false

Object . defineProperty(obj,address', {
value: '中国山东蓝翔技校xx单元'，
//如果只为false 不允许修改这个属性值默认值也是false
writable: false,
// enumerable 如果值为false则不允许遍历，默认的值是false
erumerable: false
configurable: false
});

7.

apply()方法调用一一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。
fun. apply (thisArg, [argsArray] )
●thisArg :在fun函数运行时指定的this值
●argsArray :传递的值,必须包含在数组里面
●返回值就是函数的返回值 ,因为它就是调用函数

 bind 1.不会调用原来的函数可以改变原来函数内部的this指向
         2.返回的是原函数改变this之后产生的新函数

var btns = document . querySelectorAll( ' button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this .disabled = true;
setTimeout (function() { 
this.disabled = false;//这里this指向window
}.bind(this), 2000);

主要应用场景:
1. call经常做继承.
2. apply 经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数但是还想改变this指向.比如改变定时器内部的this指向.

8.严格模式

1.变量规定
①在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,量都必须先用
var命令声明,然后再使用。
②严禁删除已经声明变量。例如, delete x;语法是错误的。

2.严格模式下this指向问题
①以前在全局作用域函数中的this指向window对象。
②严格模式下全局作用域函数中的this指向undefined.
③以前构造函数时不加new也可以调用,当普通函数, this 指向全局对象
④严格模式下，如果构造函数不加new调用，this会报错.
⑤new实例化的构造函数指向创建的对象实例。
⑥定时器this还是指向window。
⑦事件、对象还是指向调用者。

3.函数变化
①函数不能有重名的参数。
②函数必须声明在顶层新版本的JavaScript 会引入"块级作用域”( ES6中已引入)。为了与新版本接轨，
不允许在非函数的代码块内声明函数。比如不能在if语句内声明函数

9.闭包的主要作用:延伸了变量的作用范围

10.浅拷贝只是拷贝一层，更深层欢对象级别的只拷贝引用.原拷贝对象数据改变，也会跟着改变
深拷贝拷贝多层，每一级别的数据都会拷贝.

Object.assign( target, ... sources) es6 新增方法可以浅拷贝

varobj={
id:1，
name :'andy' ,
};
var o ={};
for (var k in obj) {
// k是属性名obj[k]属性值
o[k] = obj[k];//相当与o.id=obj[k]...
}
console.1og(o);

深拷贝封装函数 

function deepCopy (newobJ, oldobJ) (
for (var k in oldobj) {
// 判断我们的属性值属 于那种数据类型
// 1.获取属性值 oldobj[k]
var item = oldobj[k];
//2.判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3.判断这个值是否是对象
newobj[k] = {};
deepCopy(nevobj[k], item)
} else {
// 4.属于简单数据类型
newobj[k] = item;
}

11.

^表示匹配行首的文本(以谁开始)
$表示匹配行尾的文本(以谁结束)
如果^和$在一起,表示必须是精确匹配。

量词符用来设定某个模式出现的次数。
量词
说明
*
重复零次或更多次
+
重复- -次或更多次
?
重复零次或- -次
{n}
重复n次
{n,}
重复n次或更多次
{n,m}
重复n到m次

预定类
\d
匹配0-9之间的任一数字, 相当于[0-9]
\D
匹配所有0-9以外的字符，相当于[^0-9]
\w
匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ]
\W
除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_ ]
\s
匹配空格(包括换行符、制表符、空格符等) , 相等于[ \tlr\n\v\f]
\S
匹配非空格的字符，相当于[^ \t\r\n\v\f]

 

btn. onclick =
function() {
div. innerHTML = text. value. replace(/激情gay/g,'**');