-
属性
- prototype:
js中每个构造函数都有prototype对象(只能是函数才有,对象没有).所有实例对象需要共享的方法和属性放到prototype对象里,不要共享的就放在构造函数中
prototype不用手动声明.
设置方法function Animal(name){ this.name = name } // 设置需要共享的属性 Animal.prototype.sayName = function(){ console.log(this.name) } // 创建实例 let cat = new Animal('cat') cat.sayName()// cat 调用的是原型方法 // 方法重写 cat.sayName = function(){ console.log('我就是一只猫') } cat.sayName()// 我就是一只猫 调用的是cat实例的方法
- __proto__
__proto__ 大多数指向构造函数的原型 cat.__proto__ === Animal.prototype // true cat.__proto__ = cat.constructor.prototype = Animal.prototype
Object.create()不一定是,传入什么就是将__proto__指向谁
__proto__指向:
Object.create(),传一个null,创建的实例的__proto__ 就是null,所以可以用此种方式创建一个干净的没有原型的对象- 字面量方式创建
let cat = {} console.log(cat.__proto__ === Object.prototype) //true
-
构造函数方式创建
function Animal(){ console.log('Animal') } let cat = new Animal() console.log(cat.__proto__ === Animal.prototype)
-
Object.create方式创建
function Animal(){ console.log('animal') } let cat = Object.create(Animal) console.log(cat.__proto__ === Animal.prototype) // false console.log(cat.__proto__ === Animal) // true
- 字面量方式创建
- constructor
每个对象都会有一个constructor
属性来指向自己的构造函数function Animal (){ console.log('Animal') } console.log(Animal === Animal.prototype.constructor) // true
- prototype:
-
三个关系
-
图形解释
-
理解
一个实例的__proto__ 就是他的构造函数的prototype
一个构造函数的__proto__ 就是Function.prototype
Function.__Proto__就是Object.prototype
给他一个构造函数上添加一个原型方法,他的实例的原型和其余的function的__proto__不同,但是构造函数的__proto__和Function的__proto__好使相同的
-
-
原型链:
每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链
每个构造函数都有一个prototype的对象,(显式原型),用来显示修改对象原型
实例.__proto__ = 构造函数.prototype = 原型
原型链的特点,通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,继而形成一个查找链就是原型链
原型链就是通过原型组成的一条查找链,从实例对象开始,通过__proto__
来向上查找,直到找到null
为止,
每个prototype
对象的最终指向都是Object.prototype
function dog(){} function cat(){} function monkey(){} console.log(dog.prototype.__proto__ === Object.prototype) // true console.log(cat.prototype.__proto__ === Object.prototype) // true console.log(monkey.prototype.__proto__ === Object.prototype) // true
-
new
new 就是创建一个空对象.空对象继承,构造函数的原型对象,并且空对象指向原型对象 -
instanceof
instanceof 的原理:就是判断构造函数的prototype,是不是和实例对象的__proto__的值指向同一个地址let arr = [1,2] arr instanceof === Array // true arr instanceof === Object// true arr instanceof === String// false
-
题目理解
function User() {} User.prototype.hello = function () {} let u1 = new User() let u2 = new User() console.log(u1.hello === u2.hello) // true console.log(User.prototype.constructor) // ueser(){} console.log(User.prototype === Function.prototype) // false console.dir(User.prototype) // User.prototype含有hello console.log(Function.prototype) // Function.prototype没有hello console.log(User.__proto__ === Function.prototype) // true console.dir(User.__proto__) // Function.prototype console.log(Function.prototype) // Function.prototype console.log(User.prototype === Function.__proto__) // false console.dir(User.prototype) // User.prototype 含有hello console.log(Function.__proto__) Object.prototype console.log(u1.__proto__ === u2.__proto__) // true console.dir(u1.__proto__) // User.prototype console.log(u2.__proto__) // User.prototype console.log(u1.__proto__ === User.__proto__) // false console.dir(u1.__proto__) // User.prototype console.log(User.__proto__) // Function.prototype console.log(u1.__proto__ === User.prototypr) // true console.dir(u1.__proto__) // User.prototype console.log(User.prototypr) // User.prototype console.log(Function.__proto__ === Object.__proto__) // true console.dir(Function.__proto__) // object.prototype console.log(Object.__proto__) // null console.log(Function.prototype.__proto__ === Object.prototype.__proto__) // false console.dir(Function.prototype.__proto__) // object.prototype console.log(Object.prototype.__proto__) // null console.log(Function.prototype.__proto__ === Object.prototype) // true console.dir(Function.prototype.__proto__) // object.prototype console.log(Object.prototype)// object.prototype
js原型及原型链
最新推荐文章于 2024-08-29 10:24:56 发布