在构造函数创建的时候,系统默认的帮构造函数创建并关联一个对象 这个对象就是原型
在原型中的所有属性和方法,都可以被和其关联的构造函数创建出来的所有的对象共享
构造函数名.prototype 实例化的对象.__proto __
function Person (name) {
this.name = name
}
Person.prototype.fn = function () {
console.log('hello world')
console.log(this.name)
}
var p = new Person('小红')
p.fn()
p.name = '晓丽'
p.fn()
console.log(Person.prototype)
console.log(p)
image
image
含义: 是一个函数的属性,这个属性是一个指针,指向一个对象 作用: 构造函数调用 访问该构造函数所关联的原型对象
含义: 是一个对象拥有的内置属性,是js内部使用寻找原型链的属性,通过该属性可以允许实例对象直接访问到原型
含义:原型对象的constructor 指向其构造函数,如果替换了原型对象之后,这个constructor属性就不准确,需要手动补充一下
image
image
image
扩展以及延伸
image
在很多编程语言中,如java,objectC,c++等,都存在类的概念,类中有私有属性,私有方法等,通过类来实现面对对象的继承,但是,在ES5以及以前中不像上面这几种语言一样,有严格的类的概念。js通过构造函数以及原型链来实现继承。
var obj = new Date()
// 可以分解为
var obj = {};
obj.__proto__ = Date.prototype;
Base.call(obj)
构造函数与普通函数的区别
//构造函数
function Egperson (name,age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var person = new Egperson('mike','18'); //this-->person
person.sayName(); //'mike'
//普通函数
function egPerson (name,age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
egPerson('alice','23'); //this-->window
window.sayName(); //'alice'
function CreatePerson(name, age, gender){
var obj = {};
obj.name = name;
obj.age = age;
obj.gender = gender;
//由于是函数调用模式,所以this打印出来是window
console.log(this);
return obj;
}
var p = CreatePerson("小明", 18, "male"); // 调用方式是函数的调用方式
function CreatePerson(name, age, gender){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.gender = gender;
//这里的this指向new 创建出来的对象
console.log(this);
return obj;
}
var p = new CreatePerson("小明", 18, "male"); // 调用方式是函数的调用方式
function Person(name, age, job) {
//属性
this.name = name;
this.age = age;
this.job = job;
//方法
if(typeof this.sayName != "function") {
//所有的公有方法都在这里定义
Person.prototype.sayName = function() {
alert(this.name);
};
Person.prototype.sayJob = function() {
alert(this.job);
};
Person.prototype.sayAge = function() {
alert(this.age);
};
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //Nicholas
person2.sayName(); //Greg
js实现继承的方式: 混入式继承,原型继承以及经典继承,ES6的Class也可以实现继承
基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
// ES5
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
// ES6
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
每一个对象都有proto属性,指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖,同时有prototype属性和proto属性,因此同时存在两条继承链。
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
类的继承内部实现
class A {
}
class B {
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
const b = new B();
Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
作为一个对象,子类(B)的原型(proto属性)是父类(A);
作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。
Object.create(A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;
子类实例的proto属性的proto属性,指向父类实例的proto属性。也就是说,子类的原型的原型,是父类的原型。
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
类的方法内部含有this,默认指向类的实例。但是当类中的实例方法提取出来使用的时候,this指向运行时所在环境。
解决方法(新版react中,在声明绑定方法的时候 三种方式与此相同)
class Logger {
constructor() {
this.printName = this.printName.bind(this);
}
// ...
}
class Logger {
constructor() {
this.printName = (name = 'there') => {
this.print(`Hello ${name}`);
};
}
// ...
}