构造函数创建对象
function Person(){
}
let p = new Person();
p.name = 'dundunzi';
console.log(p.name)//dundunzi
new 一个构造函数的过程：
- 创建一个空对象
- 空对象的__proto__ 指向构造函数的prototype
- 函数对象的this指向新创建的对象
prototype
每个普通函数（非箭头函数）都有一个prototype属性，prototype是函数才会有的属性
function Person(){
}
Person.prototype.name = 'dundunzi';
let p1 = new Person();
let p2 = new Person();
console.log(p1.name,p2.name) //dundunzi dundunzi
函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建实例的原型，也就是例子中的p1,p2的原型。
原型：每一个js对象（除了null) 在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型”继承“属性。
proto
每一个js对象（除了null) 都有一个属性叫__proto__,这个属性会指向该对象的原型。
console.log(p1.proto === Person.prototype) //true
constructor
每个原型都有一个constructor属性指向关联的构造函数。
console.log(Person === Person.prototype.constructor) //true
function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true
console.log(person.constructor === Person); // true 当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
实例与原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
function Person() {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin
但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，结果为 Kevin。
原型的原型
原型链
自己写的更清楚：
1.每个对象都有原型__proto__吗？no！
2.构造函数也是对象，也有__proto__ 指向Function.prototype, 服务于函数对象的；
prototype是服务于用构造函数的
3.设置原型的方法：
let obj ={
show(){
console.log(this.name)
}
}
// 1. Object.create() //定义原型 但是不能获取
let a = Object.create(obj,{
name:{
value:'dundun'
}
})
a.show()
// 2.__proto__ 不标准
let a={name:'dundun'}
a.__proto__ = obj;
a.show()
// 3. Object.setPrototypeOf(hd, parent); 标准的
let hd = {name:'lyj'};
let parent = { name: "parent" ,age:123};
Object.setPrototypeOf(hd, parent);
console.log(hd);
hd.age=999
console.log(Object.getPrototypeOf(hd));
console.log(parent.isPrototypeOf(hd)) //true
4.怎么写出合理的构造函数？
方法放到原型中
继承
继承本质：就是复制，重写原型对象
改变构造函数原型并不是继承
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
</body>
<script>
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.getSuperName = function() {
console.log(this.name)
}
// -----------------------------1.原型链继承--------------------------------
/*
function SubType() {
this.subproperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
var instance = new SubType('lyj');
console.log(instance.getSuperName(),instance.getSubValue()); // undefined false
instance.colors.push('yellow');
var instance2 = new SubType();
console.log(instance.colors,instance2.colors) ;//['red', 'blue', 'green', 'yellow'] ['red', 'blue', 'green', 'yellow']
*/
// 缺陷：
// 多个实例对引用类型的操作会被篡改。
// 不能向父类构造函数传参
// -----------------------------2.构造函数继承--------------------------------
/*
function SubType(...args) {
SuperType.call(this,...args)
}
var instance = new SubType('lyj');
instance.colors.push('yellow');
var instance2 = new SubType();
console.log(instance.colors,instance2.colors,instance.name) ;//['red', 'blue', 'green', 'yellow'] ['red', 'blue', 'green'] 'lyj'
// instance.getSuperName();//报错 不能获取原型上的方法
*/
// 缺陷：
// 只能继承父类的实例属性和方法，不能继承原型上属性和方法；
// 无法实现复用，每个子类都有父类实例函数的副本，影响性能
// -----------------------------3.组合继承继承--------------------------------
// 用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。
/*
function SubType(...args) {
SuperType.call(this,...args)
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
var instance = new SubType('lyj');
instance.getSuperName()
instance.colors.push('yellow');
var instance2 = new SubType();
console.log(instance.colors,instance2.colors,instance) ;//['red', 'blue', 'green', 'yellow'] ['red', 'blue', 'green']
*/
// 缺点：通过两次调用父类构造函数，子类创建的实例和原型上存在两份相同的属性
// -----------------------------4.原型式继承--------------------------------
/*
let person ={
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}
function object(obj){
function F(){}
F.prototype = obj;
return new F()
}
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(anotherPerson.friends,yetAnotherPerson.friends,person.friends); //"Shelby,Court,Van,Rob,Barbie"
// ---------------或者使用Object.create---------
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(anotherPerson.friends,yetAnotherPerson.friends,person.friends); //"Shelby,Court,Van,Rob,Barbie"
*/
// 缺点：同原型链继承
// -----------------------------5.寄生式继承--------------------------------
// 在原型式继承的基础上，增强函数
/*
function createAnother(original){
var clone = object(original); // 通过调用 object() 函数创建一个新对象
clone.sayHi = function(){ // 以某种方式来增强对象
alert("hi");
};
return clone; // 返回这个对象
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
*/
// 缺点：同原型链继承
// -----------------------------6.寄生组合继承--------------------------------
// 构造函数和寄生式组合
/*
function extend(SubType,SuperType){
SubType.prototype = Object.create(SuperType.prototype); // 寄生式
SubType.prototype.constructor = SubType;//增强函数 子类构造函数中写函数方法
}
function SubType(...args) { // 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
SuperType.call(this,...args)
}
extend(SubType,SuperType)
let sub1 = new SuperType('lyj');
let sub2 = new SuperType('dundun');
sub1.colors.push('pink')
sub1.getSuperName();
console.log(sub1.colors,sub2.colors)//['red', 'blue', 'green', 'pink'] ['red', 'blue', 'green']
*/
// -----------------------------7.混入方式继承多个对象--------------------------------
/*
function MyClass{
SuperClass.call(this);
OtherSuperClass.call(this);
}
// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;
MyClass.prototype.myMethod = function() {
// do something
};
*/
// -----------------------------8.es6 extends继承--------------------------------
// extends继承的核心代码如下，其实现和上述的寄生组合式继承方式一样
/*
function _inherits(subType, superType) {
// 创建对象，创建父类原型的一个副本
// 增强对象，弥补因重写原型而失去的默认的constructor 属性
// 指定对象，将新创建的对象赋值给子类的原型
subType.prototype = Object.create(superType && superType.prototype, {
constructor: {
value: subType,
enumerable: false,
writable: true,
configurable: true
}
});
if (superType) {
Object.setPrototypeOf
? Object.setPrototypeOf(subType, superType)
: subType.__proto__ = superType;
}
}
*/
</script>
</html>
4066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
