函数
每个函数都有其属性和方法。
属性
1、length属性。
2、prototype属性:每个函数都有一个prototype属性,这个对象指向原型对象(下面会讲到什么是原型对象);每个函数都包含不同的原型对象;当将函数用作构造函数的时候,新创建的对象会从原型对象上“继承”属性。
方法
1、call()。
2、apply()。
3、bind()。
4、toString()。
构造函数
专门用来生成实例对象的函数。它就是对象的模板,描述对象的基本信息;构造函数就是一个普通的函数。为了和普通函数区别,构造函数名字的第一个字母通常大写。
特点
函数体内使用this关键字,代表了所要生成的对象是咧。
生成对象的时候,必须使用new命令。
new命令的原理
创建一个一个空对象,作为将要返回的对象实例
将这个对象的原型,指向构造函数的prototype属性
将这个空对象赋值给函数内部的this关键字
开始执行构造函数内部的代码
function _new() {
var obj = new Object(); // 1.创建一个空对象,作为将要返回的对象实例。
var Constructor = [].shift.call(arguments); // 取出构造函数。
obj.__proto__ = Constructor.prototype; // 2.将这个空对象的原型,指向构造函数的prototype属性。
var ret = Constructor.apply(obj, arguments); // 3.将这个空对象赋值给函数内部的this关键字。4.开始执行构造函数内部的代码。
return typeof ret === 'object' ? ret : obj;
}
对象
Js的设计是一个简单的基本对象的形式,一个对象就是一系列属性的集合,一个属性包含一个名和值。一个属性的值可以是函数,这种情况下属性也被称之为方法。
使用构造函数创建对象
通过创建一个构造函数来定义对象的类型
通过new来创建对象。
Eg:为了定义对象类型,为对象类型创建一个函数以声明类型的名称、属性和方法。例如,你想为骑车创建一个类型,并且将这类对象称为car,并且拥有属性make、model和year,可以创建如下函数
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
// 注意通过使用 this 将传入函数的值赋给对象的属性。
var kenscar = new Car("Nissan", "300ZX", 1992);
var vpgscar = new Car("Mazda", "Miata", 1990);
// 这就是上文讨论的构造函数的作用
Object.create()
对象可以用Object.create()方法创建。该方法非常有用,因为它允许你为创建的对象选择一个原型对象,而不用定义构造函数。
var Animal = {
type: "Invertebrates", // 属性默认值
displayType : function() { // 用于显示type属性的方法
console.log(this.type);
}
}
// 创建一种新的动物——animal1
var animal1 = Object.create(Animal); // Animal 是一个普通对象,不是构造函数,我们也能创造出新动物。
animal1.displayType(); // Invertebrates
原型prototype与原型链(“继承”)
原型
每个函数都有一个prototype属性,就是我们经常在各种列子中看到的那个prototype。
Prototype是函数才会有的属性。函数的prototype属性指向一个对象,这个对象正是调用该构造函数函数而创建的实例的原型。因此prototype指向的是实例的原型。
什么是原型?每个js对象(null除外)在创建的时候就会与之关联另外一个对象,这个对象就是我们所说的原型,每个对象都会从原型“继承”属性
Eg:
function Person() {
}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin
proto
这个是每个js对象都会有的一个属性,_proto_这个属性会指向该对象的原型。
因此实列对象和和函数都可以指向原型。
Constructor
每个原型都有一个constructor属性指向关联的构造函数
实列与原型
当读取实例的属性时,如果找不到,就会查找,与对象关联的的原型中的属性,如果还是找不到,就回去找原型的原型,一直找到最顶层为止
Eg
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
原型的原型
原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它
var obj = new Object();obj.name = 'Kevin’console.log(obj.name) // Kevin
原型链
定义:
对象继承属性的一条链。指两个对象之间创建一个关联,这样,一个对象就(继承)可以通过委托访问另外一个对象的属性和函数。由相互关联的原型组成的链状结构就是原型链。原型链通过_proto_链接起来。
"继承"的方式
1、原型链继承(优缺点 简单易于实现,但是要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,无法实现多继承)
将父类的实例作为子类的原型
Eg:
实现父类
// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉!');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃:' + food);
};
子类
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
// Test Code
var cat = new Cat();
console.log(cat.name);//cat
console.log(cat.eat('fish'));//cat正在吃:fish undefined
console.log(cat.sleep());//cat正在睡觉! undefined
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
2、构造继承(父类都是1的父类)(可以实现多继承,不能继承原型属性/方法)
实质是利用call来改变Cat中的this指向
子类
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
3、实例继承(不限制调用方式,但不能实现多继承)
为父类实例添加新特性,作为子类实例返回
子类
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
4、拷贝继承(支持多继承,但是效率低占用内存)
将父类的属性和方法拷贝一份到子类中
子类
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || 'Tom';
}
5、组合继承()
通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
子类
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
6、寄生组合继承
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
7、ES6的extends继承
ES6 的继承机制是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this
//父类
class Person {
//constructor是构造方法
constructor(skin, language) {
this.skin = skin;
this.language = language;
}
say() {
console.log('我是父类')
}
}
//子类
class Chinese extends Person {
constructor(skin, language, positon) {
//console.log(this);//报错
super(skin, language);
//super();相当于父类的构造函数
//console.log(this);调用super后得到了this,不报错,this指向子类,相当于调用了父类.prototype.constructor.call(this)
this.positon = positon;
}
aboutMe() {
console.log(`${this.skin} ${this.language} ${this.positon}`);
}
}
//调用只能通过new的方法得到实例,再调用里面的方法
let obj = new Chinese('红色', '中文', '香港');
obj.aboutMe();
obj.say();
所以当我们写构造函数时,如果想写一些公共的(可继承的)属性或方法,可以写在prototype原型上。