一个对象的结构(属性+操作)
属性:
(1)我们要说属性的来源,它有两个来源,第一来自于自己如上图的x,y属性,第二来自于原型链的继承,如上图的z,当我们访问obj.z时,会首先在自身上找这个属性,有的话将返回没有的话将沿着原型链继续向上查找找到返回,没有找到的话返回undefined,如果我们给对象obj添加属性z obj.z = 4,那么做的操作将是在对象的身上添加一个新属性z,此时我们访问obj.z将会是4,但是我们访问原型对象上的z依然会是3,这是因为根据原型链查找的优先原则,先要访问自身,找到有z的值那就将它读取
(2)我们要说的将是属性标签,属性标签就是定义描述这个属性可以做哪些不可以做哪些,属性标签有4个(writable/enumerable/configurable/value)分别是是否可写/是否可枚举/是否可重新配置/值,get/set则是设置和读取属性值指定的方法,这里不做过多的赘述
操作:即方法,方法的来源与属性相同,一是来自于自身,而是来自于原型链的继承
附:
一:创建对象的多种方式
2.工厂模式(无法知道一个对象的类型)!
3.使用构造函数(不同实例内的同名函数是不相等的,浪费内存空间)
4.使用原型
5.组合使用构造函数和原型模式
二:实现继承的多种方式
//父类
function Person(name){
this.name = name;
this.show = function(){
console.log(this.name)
}
}
//原型方法
Person.prototype.showName = function(){ console.log(this.name) }
//1.原型继承(将父类的实例作为子类的原型 缺点:挂在到Stu原型的方法必须要在Stu.prototype = new Person()之后执行,并且let stuObj = new Stu()也要在原型更换之后执行,否则stuObj._proto_是不等于Stu.prototype的)
function Stu(){}
Stu.prototype = new Person("haha");
let stuObj = new Stu();
stuObj.show(); //haha
stuObj.showName(); //haha
stuObj.name = "xixi";
stuObj.show(); //xixi
stuObj.showName(); //xixi
console.log(stuObj instanceof Stu); //true
console.log(stuObj instanceof Person); //true
//2.构造继承(1.实例并不是父类的实例,2.只能继承父类的属性和方法,并不你能访问到父类原型的属性和方法, 3.父类函数会在每个子类中都存在一个副本)
function Stu(name){
Person.call(this,name)
}
let stuObj = new Stu("haha");
stuObj.show();
stuObj.name = "xixi";
stuObj.show();
stuObj.showName();//报错
console.log(stuObj instanceof Stu); //true
console.log(stuObj instanceof Person); //false
//3.实例继承(为父类实例添加新属性,作为子类实例返回 缺点:实例时父类的实例,不是子类的实例)
function Stu(name){
let per = new Person(name);
per.showName = function(){
console.log(per.name)}
return per;
}
let stuObj = new Stu("haha");
stuObj.showName();//haha
stuObj.show(); //haha
console.log(stuObj instanceof Person) ;//true
console.loe(stuObj instanceof Stu);//false
//4.拷贝继承(无法获取到父类不可枚举的方法)
function Stu(name){
this.name = name;
let per = new Person();
for(let i in per){
Stu.prototype[i] = per[i]
}
}
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stuObj instanceof Person);//false
//5.组合继承(通过调用父类构造,继承父类的属性和方法,通过将父类的实例作为子类原型实现父类原型方法的继承,需要修复构造函数指向)
function Stu(name){
Person.call(this,name);
}
Stu.prototype = new Person();
Stu.prototype.constructor = Stu;
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stu instanceof Person);//true
//6.寄生组合继承(通过寄生方式。砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法属性,避免组合继承的缺点)
function Stu(name){
Person.call(this);
}
(function(){
//创建一个没有实例方法的类
let Super = function();
Super.prototype = Person.prototype;
Stu.prototype = new Super();
})()
Stu.prototype.constructor = Stu; //修复构造函数
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stuObj instanceof Person);//true
三:js实现多态和重载
多态:多态是动态的,发生在运行阶段,面向对象特征之一。表现为不同对象调用相同方法会产生不同的结果,可以理解一个方法被不同实现后,展现不同的效果
重载:重载发生在编译阶段。函数特征之一,表现为在一个类中同名不同参的方法分别被调用产生不同的结果
重载实现(js本身不支持重载)
1.根据arguments个数实现重载
2.根据参数类型实现重载
多态实现
javascript学习(ECMAScript,DOM,BOM)https://www.jianshu.com/p/b7136540b379