js原型和原型链

hss

发布于 2022-02-25 19:12:33

2.1K0

发布于 2022-02-25 19:12:33

构造函数

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

Person 就是一个构造函数，使用 new 创建了一个实例对象 person

原型(prototype)

每个函数都有一个 prototype 属性每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型对象prototype ，每一个对象都会从原型对象上"继承"属性。

function Person() {

}

Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

原型链(proto)

每一个JavaScript对象(除了 null )都有一个隐式的__proto__，它指向它的原型

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

constructor

每个原型prototype 都有一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

实例和原型

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

在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ，即 Person.prototype中查找，找到了 name 属性，结果为 Kevin。

原型和原型链

一张图搞懂：

函数与 Function 的关系函数就是 Function 的实例. 即 Function 就是函数的构造函数，实例对象有一个继承的 constructor 属性, 该方法指向就是构造函数自己定义一个函数( 任意的函数 ), 可以知道函数的 constructor 就是 Function，得到结论函数就是 Function 的实例。 Function 也是函数, 那么有什么结论? Function 就是 Function 的实例. 即自己就是自己的实例。
Object 与 Function的关系 Object 是函数, 因为函数在 Function 中, 所以Object是Function的实例对象. 因此就构成一个三角形。Object可以使用__proto__来访问对象的原型对象，即Object可通过__proto__访问Function的Function.prototype
原型继承的整个关系( 原型链 ) 可以知道所有的对象都有原型, 一步一步往上走, 都会汇集到 Object.prototype ，Object.prototype 是顶级的对象。

// Function 就是 Function 的实例(约等于实例化对象的__proto__指向其构造函数的prototype)
console.log(Function.__proto__ === Function.prototype);         // true
console.log(Object.__proto__ === Function.prototype);           // true
console.log(Function.__proto__ === Object.__proto__);           // true
console.log(Function.prototype.__proto__ === Object.prototype); // true

应用

继承

看我这篇文章：js实现继承

增删查改

function Person() { }
// 增
Person.prototype.name = '张三'
Person.prototype.age = 18
Person.prototype.sex = 'male'
var person = new Person()
// 查
console.log(Person.prototype);  //{name: "张三", age: 18, sex: "male", constructor: ƒ}
// 改
Person.prototype.age = 20
console.log(Person.prototype.age);//20
// 删
delete Person.prototype.sex
console.log(Person.prototype);  //{name: "张三", age: 20, constructor: ƒ}

重写原型方法

Object.prototype.tostring = function () {
    return 'aaa'
}
// Person.prototype.tostring = function () {
//     return 'bbb'
// }
function Person() {

}

var person = new Person()

案例

案例1

 function Person() {
    // var this = {
    //     __proto__: Person.prototype
    // }
}
var person = new Person()
Person.prototype.name = '张三'
Person.prototype = {
    name: '王五'
}
console.log(person.name);   //张三

案例2

function Person() {
    // var this = {
    //     __proto__: Person.prototype
    // }
    // return this
}
Person.prototype.name = '张三'
Person.prototype = {
    name: '王五'
}
var person = new Person()
console.log(person.name);   //王五

案例3

document.write(value)，向文档中输出value的toString()方法

var obj = Object.create(null)
// document.write(obj) //报错，找不到它的toString()方法
obj.toString = function () {
    return 'aaa'
}
document.write(obj) //aaa

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/07/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

面向对象编程

javascript

登录后参与评论

0 条评论

热度