js:记录函数、构造函数、原型以及原型链的学习。

函数

每个函数都有其属性和方法。
属性
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原型上。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值