前端--阶段笔记（三）JavaScript 高级

JS高级

JS AD Day 01

面向对象编程OOP：封装、继承、多态

使用功能来划分问题，而不是步骤。

类和对象

js中 对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，函数，数组等。

对象是由属性和方法组成的。
属性是事物的特征。
方法是事物的行为。

抽取对象公用的属性和行为组织成一个类。即抽象对象共有属性和行为封装成一个模板。
对类进行实例化，获取类的对象。

类，class，类抽象了对象的公共部分，泛指某一大类。
对象特指某一个，通过类实例化一个具体的对象。

1 .创建类

语法： 首字母大写

class MyClassName {
   
//class body 
}

创建实例：

var xxx = new MyClassName();

类必须使用 new 来实例化对象。

constructor 构造函数

constructor()方法是类的构造函数（默认方法）。用于传递参数，返回实例对象，通过new命令生成实例对象时，自动调用该方法。如果不写也会自动生成。

例：

class Star {
   
    constructor(uname,age) {
   
        this.uname = uname;
        this.age = age;
    }
  //注意 此处上下文分隔不同函数 没有加,
  //且 写函数不用加function
    say() {
   
        console.log('hi');
    }
}

var ldh = new Star('刘德华',18);
console.log(ldh.uname);

注意点

1）class关键字创建类，类名首字母大写
2）类里面有一个constructor函数，可接收传递过来的参数，同时返回实例对象
3）使用new关键字时，自动调用constructor，不写也会自动生。
4）创建类，类名后面不能加（），生成实例，类名后面可以加小括号。
5）构造函数不需要加function，类中所有函数都不用加function关键字，且多个函数方法间不用加’,'来进行分隔。

继承extends

extends ，子类可以继承父类的一些属性和方法。

 class Father {
   
            money() {
   
                console.log(100);
            }
        }

class Son extends Father {
   
}

var son = new Son();
son.money();

super关键字

用于访问和调用父类上的函数。可以调用父类的构造函数，也可调用普通函数。

class Father {
   
constructor(x,y) {
   
    this.x = x;
    this.y = y;
}
    sum() {
   
        console.log(this.x + this.y);
    }
}

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

super关键字可以调用父级构造函数也可以调用普通函数。
extends 继承就近原则 ，父亲和儿子 产生冲突的时候，离谁近先执行谁的。
如果要输出父类中的方法，加super.say()，super.say()就是调用父类中的普通函数say()；
在子类构造中使用super，必须放在子类的this之前调用。

类和对象三个注意点

1 .es6中，类没有变量提升，所以必须先定义类才能通过类来实例化对象。
2 .类里面共有的属性和方法一定要加this使用。
3 .constructor里面的this指向的是创建的实例对象。类中的方法指向的是调用者，谁调用指向谁。如一个btn

//可以直接在constructor中调用方法，这样只要new一下，就直接执行
   class MyName{
   
        constructor(x,y){
   
            this.x = x
            this.y = y
            this.say()//注意加this
        }

        say() {
   
            console.log('sing a song')
        }
    }
    new MyName

TAB栏切换案例

把整个tab栏表单当作一个对象，先抽象出来类，然后new一个出来。各种方法如新建切换删除等，写在类中，然后在init方法中注册。

insertAdjacentHTML

insertAdjacentHTML(positon,text); 将指定的文本解析为HTML或者XML，并将结果节点插入到指定位置。

一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：

• 'beforebegin'：元素自身的前面。
• 'afterbegin'：插入元素内部的第一个子节点之前。
• 'beforeend'：插入元素内部的最后一个子节点之后。
• 'afterend'：元素自身的后面。

appendChild 不支持字符串，insertAdjacentHTML支持。

双击事件 ：ondbclick

双击默认操作是选中文字，所以用以下代码清除默认操作：

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

核心思路，双击文字的时候，在里面生成一个文本框，当时去焦点或者按下回车的时候把文本框输入的值给原先的元素即可。

JS AD 02

构造函数与原型

ES6之前没有类和继承的概念。
基于构建函数和原型来实现这些功能的。

ES6之前，对象不是基于类创建的，是通过构造函数这一特殊函数来定义对象和特征的。

创建对象示例：

// 1. 利用 new Object() 创建对象
var obj1 = new Object();
	var obj = new Object();
	obj.uname = 'nancy';
	obj.sex = female;
	obj.sayHi = function() {
   
	console.log('Hi~');
	}
// 2. 利用 对象字面量创建对象
        var obj2 = {
   };
		var obj2 = {
   
		username: "charlotte",
		age:18,
		sex:female,
		sayHi: function() {
   
		console.log('hi～');
		}
	}
// 3. 利用构造函数创建对象
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
            this.sing = function() {
   
                console.log('我会唱歌');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(ldh);
        ldh.sing();
        zxy.sing();

class方法示例：

class Star {
   
    constructor(uname,age) {
   
        this.uname = uname;
        this.age = age;
    }
    say() {
   
        console.log('hi');
    }
}

var ldh = new Star('刘德华',18);
console.log(ldh.uname);

js是一门动态的语言

构造函数法注意事项：
1.实例成员就是构造函数内部通过this指定的成员，比如name，age等。
实例成员需要通过实例化之后的对象来进行访问，实例化对象指的是，var ldh = new Star(‘刘德华’,18);中的ldh。
2.静态成员，在构造函数本身上添加的成员，sex就是静态成员.静态成员 – 直接给构造函数添加的成员称为静态成员
Star.sex = ‘男’；
静态成员只能通过构造函数访问，不能通过对象访问。通过console.log(ldh.sex)会报错。

  function Hero(name, blood, weapon) {
   
      // 实例成员  /  对象成员   --  跟对象相关的成员，将来使用对象的方式来调用
      this.name = name;
      this.blood = blood;
      this.weapon = weapon;
      this.attack = function () {
   
        console.log(this.weapon + ' 攻击敌人');
      }
    } 

    // 静态成员  -- 直接给构造函数添加的成员
	// Warning 这里是给了构造函数本身
 
    Hero.version = '1.0';
    
    var hero = new Hero('刘备', 100, '剑');
    hero.attack();

    var hero1 = new Hero('关羽', 100, '刀');
    hero1.attack();
    // 静态成员不能使用对象的方式来调用
    console.log(hero.version); 注意这里的h是小写

    // 静态成员使用构造函数来调用
    console.log(Hero.version); //注意这里的H是大写

构造函数问题：内存浪费