JavaScript学习之对象原型及继承

妤锋シ发布于2019-08-23 12:16 / 1036人阅读

摘要：原型要掌握这三者之间的关系，通过代码例子记录一下自身属性的这里就是通过代码看一下做了什么默认情况下，将的所有属性包括继承的赋值给有什么东西呢自己的原型链，添加一个属性，用来指明对象的谁构造的自身全部属性，这边构建一个空对象原型，所以没有自有

原型

要掌握这三者之间的关系prototype，constructor,__proto__
通过代码例子记录一下

function F() {
    this.a = 123;     //             this : {
                      //自身属性             a ：123,   
                      //this的.__proto__      Object.creat(F.prototype),    
                      //                    }
};
var o = new F();      //这里o就是this

通过代码看一下

prototype做了什么
默认情况下，将F.prototype的所有属性包括继承的赋值给o.__proto__
prototype有什么东西呢？

自己的原型链，F.prototype.__proto__

prototype添加一个constructor属性，用来指明对象的谁构造的

F.prototype自身全部属性，（这边构建一个空对象原型，所以没有自有属性）

constructor，默认指向prototype对象所在的构造函数，必须从对象的原型链上去找也就是F.prototype上去找

对于__proto__,o对象得到了__proto__，这样也就形成了对象之间的链接，构成了原型链，能通过原型链访问继承的属性和方法；当然o还有自身属性a

注意点：当我们自定义了F的原型

function F() {};
F.prototype = {a : 1};
//因为原型指向的改变，需要加上构造器的正确值
F.prototype.constructor = F;
var o = new F();
console.log(o.constructor);

手动改变原型指向，会导致constructor的变更，我们需要手动添加

这种手动添加的constructor是可遍历的，一般这么修改F.prototype.a = 1;

默认constructor在F.prototype中找

F.prototype = {a : 1};赋值是引用地址的赋值

function F() {};
function G() {};
var o = new F();
F.prototype.a = 2;            //修改的还是new时创建的指针指向上的内容
//F.prototype = {a : 2};      //F.prototype得到新指针，所以new时的指针上的内容不受影响
console.log(o);

继承

继承要实现的效果是：

子类和父类存在继承关系

function F() {
    this.f = "f"
}
function Son() {
    this.s = "s"
}
var po = {a : 1};
F.prototype = po;
//第一种，是错误的
//Son.prototype = F.prototype;   //两者是同辈分，之间不存在继承，是兄弟

//第二种
Son.prototype = Object.create(F.prototype);   //Son.prototype.__proto__ = F.prototype 这个就是存在上下辈分，有继承关系

//第三种
//Son.prototype = new F()；     与第二种一样，有继承关系，但是这种会进行一次F构造函数的构建，消耗性能

所以我们采用Son.prototype = Object.create(F.prototype);

拥护父类自身的属性及方法

利用call加this机制完成子类对父类自身方法属性的继续

function F() {
    this.f1 = "1",
    this.fn = function () {
        console.log(this)
    }
}
function Son() {
    F.call(this);
}
var son = new Son();
console.log(son.fn())

构造器的修改Son.prototype.constructor = Son;使得son知道由Son构建自己

整合一下

function F() {
    this.f1 = "1";
    
}

function Son() {
    F.call(this);
    
}

F.prototype.fn = function () {};

var inherit = (function (){
    return function inherit(Target, Origin){
            Target.prototype = Object.create(Origin.prototype);
            //create等价于
            // function F() {};
            // F.prototype = Origin.prototype;
            // new F()
            Target.prototype.constructor = Target;

        }
}());
inherit(Son, F);
var son = new Son();
console.log(Object.getPrototypeOf(son));

云服务器 GPU云服务器原型继承原型链继承学习之substr() 深度学习之概要

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98215.html

Javascript学习之继承

摘要：继承是面向对象编程语言中的一个重要的概念，继承可以使得子类具有父类的属性和方法或者重新定义追加属性和方法等。但是在中没有类的概念，是基于原型的语言，所以这就意味着对象可以直接从其他对象继承。继承是面向对象编程语言中的一个重要的概念，继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。但是在Javascript中没有类的概念，是基于原型的语言，所以这就意味着对象可以直接...

CHENGKANG 2019-08-21 15:34 评论0 收藏0
JavaScript学习之Object(下)相关方法

摘要：它不区分该属性是对象自身的属性，还是继承的属性。那么我们要遍历对象所有属性，包括继承以及不可遍历的属性，用加原型遍历实现类似的用递归 Object静态方法 Object自身方法，必须由Object调用，实例对象并不能调用 Object.getPrototypeOf() 作用是获取目标对象的原型 function F() {}; var obj = new F(); console.lo...

amuqiao 2019-08-23 12:15 评论0 收藏0
JavaScript学习之Object(下)new命令

摘要：命令作用作用是执行构造函数，返回实例对象上面例子是自定义一个构造函数，其最大的特点就是首字母大写，用执行构造函数其中，在的执行下，代表了实例化后的对象，这个也就有属性注意点如果不用执行构造函数，那么指向的是全局有两种方式可以避免内部定义严格 new命令 new作用作用是执行构造函数，返回实例对象 function F() { this.name = object } var ...

Salamander 2019-08-23 12:14 评论0 收藏0
JavaScript学习之对象拷贝

摘要：对象拷贝可遍历属性浅拷贝简单的浅拷贝可以用，对存取器定义的对象也试用深拷贝属性描述对象的拷贝这是个浅拷贝深拷贝不可遍历属性对象的拷贝例如拷贝获得共同的原型，与是兄弟关系说明也继承了原型，同级别简洁化版对象拷贝可遍历属性浅拷贝 if(typeof Object.prototype.copy != function) { Object.prototype.copy = fun...

Aklman 2019-08-23 12:15 评论0 收藏0
JS学习之Object

摘要：文中的多为构造函数原型对象属性为函数的专属属性，表示函数的原型对象。关于各种数据类型的属性的展示对象的构造器函数该属性指向创建该对象原型的构造函数。对对象的冻结状态的设置和判断，前者让冻结对象，后者判断对象是否被冻结。前言上篇文章介绍了JS的对象,本文将介绍Object这个基类，主要介绍其属性和方法（其实这些在MDN里都有^_^,点击这里可以直通MDN）。好了废话不多说了，直接开始...

qujian 2019-08-20 13:42 评论0 收藏0