原型＆原型链

原型&原型链

---

1、普通函数创建对象

// 通过构造函数 Object 创建对象
let obj = new Object();		//此处对象名必须大写
	obj.uname = "张三";
	obj.age = 20;
	obj.sex = "男";
    obj.bol = true;
	obj.fn = function(){
    
        console.log("这是对象方法");
    }
console.log(obj);

2、字面量创建对象

特点：每次只能创建一个对象

缺点：每次只能创建一个对象

// 字面量创建的对象
let obj = {
    
    username:"张三"，
    pwd:"123456",
    login(){
    
	console.log(this,pwd);
    }
}
console.log(obj);

3、工厂函数创建对象【普通函数，工厂函数，构造函数】

特点：可以批量创建函数

缺点：无法识别不同的函数类型

// 工厂函数创建的对象
function demo(uname,age,phone){
    	//括号内接受参数
	let obj = new Object();		// new 一个构造函数
    obj.uname = uname;
    obj.age = age;
    obj.phone = phone;
    return obj;
}
let student0 = demo("张三","20","13512345678");		//括号内传递参数
console.log(student0);		//后台打印出学生0的数据

4、通过[ 构造函数] 实例化对象

特点：通过具体功能区分函数，可以解决工厂函数不能识别函数类型的缺点

// 通过构造函数实例化对象
function Person(age,uname,sex){
    	// 这里创建的 "对象名" 必须大写
	this.age = age;
    this.uname = uname;
    this.sex = sex;
}
let p = new Person("20","张三","男");		// 实例化对象
console.log(p);			// 后台打印出 p 函数

5、原型对象

1、构造函数访问原型对象：prototype —>存放公共方法

2、实例对象访问原型对象：_ proto _—>存放公共方法

3、实例对象访问构造函数：实例对象._ proto _.constructor (此处 _ proto _可以省略)

4、原型对象访问构造函数：原型对象.constructor (原型对象创建的构造函数)

构造函数案例

// 构造函数
function Person(uname,age,sex){
    		//这里为原型对象
	this.uname = uname;
    this.age = age;
    this.sex = sex;
  	// 在构造函数的原型上添加公共方法
	Person.prototype.fn = function(){
    
    // 原型对象中的 this 指向它的实例对象
        console.log(this.uname+"今年"+this.age+"岁了"+this.sex);
	}
}

	console.log("这是原型对象上的方法");
}
console.log(Person.prototype);
let p = new person("张三",20,"男");  //实例化对象
let p1 = new person("李四",22,"女");  //实例化对象
console.log(p);
console.log(p1);

6、原型链

原型链关系图

7、继承关系

利用原型&原型链实现继承 【面向对象】

1、先创建父类构造函数

 // 创建 父 类构造函数
    function Father(name,age,sex){
    		// 括号内的为 接收属性
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

控制台打印结果：

2、父类构造函数上创建公共方法

//Father 构造函数的原型对象上的公共方法
    Father.prototype.money = function(){
    
        console.log(this.name+"---挣钱");		// 原型对象上的this 指向调用它的实例对象
    }

控制台打印结果：

3、再创建子类构造函数

①子类直接使用 call() 调用父类方法，并传递参数[继承父类的属性]
②再创建只属于 子类 的自身属性 [ email ]

 // 创建 子 类构造函数
    function Son(name,age,sex,email){
    
        // 使用 call() 立即调用它的父类方法，并传递参数【继承父类属性】
        Father.call(this,name,age,sex);
        // 创建只属于 子类 的自身属性
        this.email = email;
    }

控制台打印结果：

4、使用new 将 父 构造器的 “实例对象” 赋值给 子 构造器的原型对象

 // 通过new 将 Father 父构造器的 "实例对象" 赋值给 Son 的原型对象
    Son.prototype = new Father();

图解：

5、利用 constructor 手动改变 Son 的原型对象所指向的构造函数

  // 利用 constructor 手动改变 Son 的原型对象所指向的构造函数
    Son.prototype.constructor = Son;

图解：

6、在 Son 的原型对象上添加 game 方法

 // 在 Son 的原型对象上添加 game 方法
    Son.prototype.game = function(){
    
        console.log(this.name+"---在玩游戏");
    }

控制台打印结果：

7、创建实例对象

 // 创建实例对象
    let f = new Father("老张",50,"男");
    let s = new Son("小张",20,"女","[email protected]");

8、控制台逐个打印检验

 // 控制台打印 子类&父类
    console.log(f,s);
 // 控制台打印 检验公共属性
    f.money();
    s.money();
 // 检验子类独自属性
    s.game();

控制台打印结果：

继承逻辑 整体图示

默认原型&原型链样式图