JavaScript-learner让前端飞Web前端之路

2018-01-09 关于javascript原型链的思考 pl

2018-01-09  本文已影响33人  _panda

s 深入理解原型和原型链?

构造函数

function User(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

var panda = new User('panda', 18, 'male');
console.log('panda:', panda);
//使用 new 的过程我们成为 ==实例化==

理解原型和原型链

怎么理解 prototype 和 __proto__ 啦?

function User(name,age,gender){
    this.name = name ; 
    this.age = age ;
    this.gender = gender ;
    this.eat = function(){
      console.log('miao')  
    } ;
    this.greeting = function(){
        console.log('yo! my name is '+this.name)
    }
}

// 我们每次使用的时候都需要重新的实例化对象
// 这样做都会重新的向内存申请新的空间,太浪费
var panda = new User();
function A(){}

A.prototype.name = 'lala';

var a = new A();
var b = new A();

//首先打开你的浏览器
//我们可以先看看 __proto__ 是什么东西
console.log(a.__proto__);
console.log(a.constructor);

// 然后比较一下 a,b 的__proto__是否指向相同
console.log(a.__proto__ === b.__proto__);//true

这里就需要解释一下其中的 Object 是什么东东?还有 constructor 又是什么东西?

这里有一个 case

new的时候js都干了什么

在 JavaScript 中,使用 new 关键字后,意味着做了如下四件事情:

//打开你的浏览器的console 试试吧

//在JavaScript中我们都知道怎么创建 对象 Object
//其实 aa 创建的方法 只是 bb 创建 {} 的一个简写,其实我们是实例化了 一个对象。
var aa = {};
var bb = new Object();
console.log(a.constructor === b.constructor)//true
console.log(a.__proto__ === b.__proto__)//true

//我们可以看到他们的constructor 和 __proto__ 都是指向的相同的
//具体的内容,可以看到原型 __proto__ 指向的是一个 Object 然后继承了一大堆方法

//测试数组
var a = [];
var a = new Array();
console.log('a',a)

上面涉及继承,这个东西我们马上谈到

//纯洁的 object
var pure = Object.create({});
console.log('pure:',pure.__proto__)

//来对比一下变量 a
var a = {};
console.log('a:',a.__proto__)
//用这样的方法创建的变量 pure 可以看到它什么都没有继承,查找它的 __proto__ 也什么都没有,零污染

多级继承链怎么实现

function Animal() {
    
}

function Manmal() {
    
}

function Person() {
    
}

Animal() Code

function Animal(color,weight) {
    this.color = color;
    this.weight = weight;
}

Animal.prototype.eat = function(){
    console.log('mia mia mia...');
}

Animal.prototype.sleep = function(){
    console.log('hu lu lu...');
}

//继承能力
var panda = new Animal('red',180);
var monkey = new Animal('yellow',20);

console.log(panda);
console.log(monkey);
console.log('a.eat === b.eat:',a.eat === b.eat);//true

//思考 我们怎样让我们的Burce来继承原始的 Animal 的能力(属性和方法)啦?
var Burce.L = new Person();
//现在 Manmal 空空如也什么都还没有
function Manmal() {
    
}

//要怎么继承啦?可能我们开始接触 prototype 最直接的方法是 将 Mannal的 prototype 直接的指向 Animal 的 prototype
Manmal.prototype = Animal.prototype; 
//这样的方法可行,但是但我们修改 Manmal的继承属性的时候会污染我们的 Animal

//所以我们使用如下的方法,开辟一个无污染的空间
Manmal.prototype = Object.create(Animal.prototype);
var a = new Manmal();
//现在来看看 a 的情况
console.log(a.__proto__);
console.log(a.constructor);

//我们可以看到 __proto__ 指向了 Animal
//但是有个问题就是 这里的 constructor 应该指向我们的 new 的构造器 Manmal ,所以我们这里还得添加一行代码

Manmal.prototype.constructor =  Manmal;

var b = new Manmal();
console.log(b.__proto__);
console.log(b.constructor);
console.log(b.eat);

//现在达到我们的想法了,将我们的 Manmal 继承了 Animal 的 ==方法==

那么属性要怎么继承啦?这里就要使用call方法了
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

function Manmal(color,weight){
    //绑定Animal的 显性属性的继承方式 
    Animal.call(this,color,weight);
}

Manmal() Code

function Manmal(color,weight){
    //绑定Animal的 显性属性的继承方式 
    Animal.call(this,color,weight);
}

Manmal.prototype = Object.create(Animal.prototype); 
Manmal.prototype.constructor =  Manmal;
//将继承的constructor 再重新指回 Manmal constructor应该为父辈,这里指向了爷爷

//我们随意给Manmal添加一个方法
Manmal.prototype.suckle = function(){
    console.log('biu biu biu...');
}

//test
var a = new Manmal('red',100);
console.log(a);

Person() Code

//修改Person

function Person(color,weight) {
    //绑定Animal的 本地属性 
    Manmal.call(this,color,weight);
}

Person.prototype = Object.create(Manmal.prototype);
Person.prototype.constructor = Manmal;
Person.prototype.lie = function(){
    console.log('你不帅!');
}

var Bruce = new Person('yellow',120);
console.log('Bruce:',Bruce);
function Animal(color,weight){
    this.color = color;
    this.weight = weight;
}

Animal.prototype.eat = function(){
    console.log('mia mia mia...');
}

Animal.prototype.sleep = function(){
    console.log('hu lu lu...');
}

function Manmal(color,weight){
    //绑定Animal的 显性属性的继承方式 
    Animal.call(this,color,weight);
}

function Person(color,weight) {
    //绑定Animal的 本地属性 
    Manmal.call(this,color,weight);
}


//使用继承 manmal --> animal
Manmal.prototype = Object.create(Animal.prototype); 
Manmal.prototype.constructor =  Manmal;
//将继承的constructor 再重新指回 Manmal constructor应该为父辈,这里指向了爷爷
Manmal.prototype.suckle = function(){
    console.log('biu biu biu...');
}


//修改Person
Person.prototype = Object.create(Manmal.prototype);
Person.prototype.constructor = Manmal;
Person.prototype.lie = function(){
    console.log('你不帅!');
}

var Bruce = new Person('yellow',120);
console.log('Bruce:',Bruce);

总结

几个原型链之间的关系:

image
上一篇 下一篇

猜你喜欢

热点阅读