构造函数的基本概念
- 任何一个函数都有一个原型属性: prototype ,即使是空函数
function f1() {}
console.dir(f1);
function User() {};
- 初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分
function User(name) {
this.name = name;
};
const user = new User('jack');
- 需要被所有类实例共享的成员,应该写到构造函数的原型上
User.prototype.age = 18;
console.log(user.age);
- 属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享;方法要写在构造函数体外会被共享,写在内是私有,不会被共享
User.prototype.show = function () {
return { name: this.name };
};
console.log(user.show());
类与继承
类的基本概念
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
static show() {
return this.tell(this.gender);
}
static gender = "fale";
static tell(gender) {
return gender;
}
console.log(User.show());
#money = 100;
类的继承
- 子类扩展父类的功能,可以拥有自己的属性或方法
- 子类中可以访问并继承父类的构造方法,原型方法,静态方法,不能访问私有成员
class User1 extends User {
constructor(name, age, money) {
//super用来继承父类属性
super(name, age);
this.money = money;
}
}
//子类继承父类的静态方法
console.log(User1.show());
dom元素的增删改查
//获取第一个元素
document.querySelector()
//获取全部元素
document.querySelectorAll()
document.createElement();
let htmlStr = "<li>item5</li>";
lis.insertAdjacentHTML("beforeEnd", htmlStr);
const frag = new DocumentFragment();
for (i = 0; i < 5; i++) {
const li = document.createElement("li");
li.textContent = "add " + (i + 1);
//将生成的节点先临时挂载到文档片断中
frag.appendChild(li);
}
lis.appendChild(frag);
let h3 = document.createElement("h3");
h3.innerHTML = "123333";
lis.replaceChild(h3, document.querySelector("li:last-of-type"));
lis.removeChild(document.querySelector("span"));
//获取所有元素
console.log(lis.children);
//获取所有元素的数量
console.log(lis.childElementCount);
//获取第一个子元素
console.log(lis.firstElementChild);
//获取最后一个子元素
console.log(lis.lastElementChild);