构造函数
原型实现继承
function Person() {}
Person.prototype.say = function () {
console.log("这是父亲定义的say方法");
};
// 两个儿子
function YellowPerson() {}
// 儿子复用父亲的方法
YellowPerson.prototype.say = Person.prototype.say;
// 自己单独的方法就跟以前一样添加
YellowPerson.prototype.sing = function () {
console.log("儿子爱唱歌");
};
function WhitePerson() {}
WhitePerson.prototype.say = Person.prototype.say;
const yp = new YellowPerson();
yp.say(); //这是父亲定义的say方法
yp.sing(); //儿子爱唱歌
call()继承属性用法
//call(this,xx,xx,xx,xx,xx)
// 父亲 构造函数 名称 颜色 身高 体重 属性
function Person(name, color, height, weight) {
this.name = name;
this.color = color;
this.height = height;
this.weight = weight;
}
// 儿子 名称 颜色 身高 体重 而且 自己 属性 昵称 、 性别
function YellowPerson(name, color, height, weight, nickname, gender) {
// 父亲中也有
Person.call(this,name, color, height, weight);// 属性的继承 继承了父亲的属性
// 儿子自己的属性
this.nickname = nickname;
this.gender = gender;
}
const yp = new YellowPerson('悟空', '黄色', 150, 250, '弼马温', '公');
console.log(yp);
方法继承
// 1.父亲有很多方法
function Person() {}
Person.prototype.add = function () {};
Person.prototype.sing = function () {};
Person.prototype.run = function () {};
// 2.想让儿子继承
function Son() {}
// 这种可以实现但是太繁琐,方法一多,写到天黑
// Son.prototype.add = Person.prototype.add;
// Son.prototype.sing = Person.prototype.sing;
// Son.prototype.run = Person.prototype.run;
// 4.解决方法---对象复制
Son.prototype = { ...Person.prototype };
// 3.另一个方法
// 直接让儿子原型指向父亲原型
// Son.prototype = Person.prototype;
//可以解决,但是有问题
// prototype是对象,是引用数据类型---一旦儿子改了,父亲也会被改
// 儿子添加方法,父亲也跟着添加
Son.prototype.clear = function () {};
// const p1 = new Person();
// console.log(p1); //父亲也多了一个clear方法
const newSon1 = new Son();
console.log(newSon1); //add sing sun方法都有
const p2 = new Person();
console.log(p2); //clear方法,父亲没有,儿子有
const newSon2 = new Son();
console.log(newSon2); //父亲的方法都有,自己的也有
小结:
当父亲有很多方法时,用最原始的方法(Son.prototype.add = Person.prototype.add)可以实现,但是繁琐,直接让儿子原型指向父亲也可以解决(Son.prototype = Person.prototype),但是一旦儿子添加自己的方法,父亲也跟着变,这些方法都不完全解决问题.
所以利用对象复制的方法,解决了以上的问题,既让儿子快速继承了父亲的方法,又可以自己添加自己的方法且不影响父亲.(以上代码可以有点乱)
ES6中class
类的使用
//用class创建一个类
class Person {
// 写死的属性---不好
// name = "空空";
// color = "黄色";
say() {
console.log("哭唧唧");
}
fly() {
console.log("飞啊飞啊");
}
// 构造器
// 属性可以灵活从外部传入
constructor(name, color) {
// 当Person被new时,这个构造器就会被调用
// 这里的this指向实例
this.name = name;
this.color = color;
}
}
const p1 = new Person("哈哈", "黄色");
console.log(p1);
p1.say();
p1.fly();
类的方式实现继承
class Person {
// 构造方法
constructor(name, age) {
// 属性
this.name = name;
this.age = age;
}
say() {
console.log("这是父类的方法");
}
}
// 儿子 继承父亲的属性,方法
class son extends Person {
// 自己拥有的属性
constructor(name, age, sex, height) {
// 如果继承父类,还写constructor,就必须用super
super(name, age); //调用父亲的构造器给儿子添加属性
this.sex = sex;
this.height = height;
}
// 方法写在constructor外面
run() {
console.log("这是自己的方法");
}
}
const s1 = new son("哈哈哈", 20, "男", 150);
console.log(s1);
// 调用从父类继承来的方法
s1.say();
// 调用自己的方法
s1.run();
补充
append和appendTo的区别
append(),在父级最后添加一个子元素
<body>
<p id="content">how about </p>
<script>
$("#content").append("<span>you.</span>");//使用append方法将span标签插入到id为content标签的尾部
</script>
</body>
//结果 how about you.
appendTo(),将子元素追加到父级的最后
<body>
<p id="content">how about </p>
<span id="letters">you.</span>
<script>
$("#letters").appendTo("#content");//使用appendTO方法将指定标签内容传输到指定标签尾部
</script>
</body>
//结果 how about you.
