JS基础（对象创建，构造函数、原型、实例之间关系，继承方式）

PAMPANG 发布于2019-08-26 13:30 / 3175人阅读

摘要：对象创建的三种方式字面量创建方式系统内置构造函数方式自定义构造函数构造函数原型实例之间的关系实例是由构造函数实例化创建的，每个函数在被创建的时候，都会默认有一个对象。

JS 对象创建的三种方式

//字面量创建方式
var person= ｛　name:"jack"　｝

//系统内置构造函数方式
var person= new Object();
person.name = "jack";

//自定义构造函数
function Person(name){
    this.name = name;
}
var person = new Person("jack");

JS 构造函数、原型、实例之间的关系

　　实例是由构造函数实例化创建的，每个函数在被创建的时候，都会默认有一个prototype对象。该对象就是构造函数的原型，并且原型对象中还有一个constructor属性，指向的是原型所在的构造函数。

在每一个实例对象中的__proto__中同时有一个 constructor 属性，该属性指向创建该实例的构造函数。

构造函数的 prototype对象默认都有一个 constructor 属性，指向 prototype 对象所在函数。

（图片原址：https://www.oecom.cn/the-rela...）

值类型成员或者引用类型成员写入（实例对象.成员 = xx）：

当实例期望重写原型对象中的某个普通数据成员时实际上会把该成员添加到自己身上,

也就是说该行为实际上会屏蔽掉对原型对象成员的访问

复杂类型修改（实例对象.成员.xx = xx）：

同样会先在自己身上找该成员，如果自己身上找到则直接修改,

如果自己身上找不到，则沿着原型链继续查找，如果找到则修改,

如果一直到原型链的末端还没有找到该成员，则报错（实例对象.undefined.xx = xx）。

JS 构造函数常用用法

function Person( name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.prototype = {
    constructor:Person, //修正，指向正确的构造函数
    introduce:function(){
        console.log("hello,everybody. my name is"+ this.name +"
")
    }
}

不需要共享的数据写在构造函数中,需要共享的数据写在原型中。

实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用,找不到则,去实例对象的__proto__指向的原型对象prototype中找,找到了则使用,找不到则报错。

原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的

JS 封装、继承、多态

　　面向对象的编程语言中有类的概念，而JS是基于对象的语言，JS中没有类，但是JS可以模拟面向对象的思想编程，JS通过构造函数模拟类的概念。

封装：一系列属性放在对象中或者一系列实现某种功能的方法放在对象，就是封装。
继承：继承属于类与类之间的关系，JS通过构造函数模拟类，通过原型来实现继承，继承的目的是为了实现数据共享。
多态：一个对象有不同的行为，或者同一个行为针对不同的对象，产生不同的结果，要想有多态，就要先有继承，JS中可以模拟多态。

JS 继承方式 借用构造函数继承：构造函数的名字.call( 当前对象，属性，属性....)

解决了属性继承问题，但是不能继承父级的方法。　　

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

function Student(name,age,score) {
    Person.call(this,name,age);
    this.score = score;
}

var Ming = new Student("小明"，"18"，"100");

组合继承：原型继承 + 借用构造函数继承　

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

Person.prototype.introduce = function(){
    console.log("hello,everybody,my name is " + this.name);
}

function Student(name,age,score) {
    Person.call(this,name,age)；
    this.score = score;
}

Student.prototype = new Person();
var Ming = new Student("小明"，"18"，"100");

寄生组合继承：寄生式继承 + 借用构造函数继承　

function inheritObject(o){
    function F(){};
    F.prototype = o;
    return new F();
}
function inheritPrototype(subclass,superclass){
    var p = inheritObject(superclass.prototype);
    p.constructor = subclass;
    subclass.prototype = p;
}

//定义父类
function SuperClass(name){
    this.name = name;
    this.colors = [red,blue]
}
SuperClass.prototype.getName = function(){
    console.log(this.name);
}    
//定义子类
function SubClass(name,time){
    //构造函数式继承
    SuperClass.call(this,name);
    this.time = time;
}
//寄生式继承父类原型
inheritPrototype(SubClass,SuperClass);
//子类新增原型方法
SubClass.prototype.getTime = function(){
    console.log(this.time);
}

模拟多继承：　

Object.prototype.mix = function(){
    var i = 0,                //从第一个参数起为被继承对象
        len = arguments.length,   //获取参数长度
        arg;                  //缓存参数对象
    for(;i < len; i++){
        //缓存当前对象
        arg = arguments[i];
        for(var property in arg){
            this[property] = arg[property];
        }
    }
}

GPU云服务器云服务器继承构造函数 js创建对象方式构造函数继承 js原型链的继承

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

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

JS基础之数据类型、对象、原型、原型链、继承

摘要：就是通过调用构造函数而创建的那个对象实例的原型对象。构造函数模式可以创建自定义引用类型，可以像创建内置对象实例一样使用操作符。数据类型：简单数据类型：Undefined、Null、String、Number、Boolean、Symbol 复杂数据类型：Object // Undefined：声明，但未初始化 // Null：空对象指针 typeof操作符（检测基本数据类型）: ...

LucasTwilight 2019-08-26 11:53 评论0 收藏0
重温JS基础--继承

摘要：继承了如上，我们通过方法借调了超类的构造函数，实际上是在新创建的实力环境下调用了构造函数。组合继承组合继承的基本思想将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。继承方法在上面这个例子中，构造函数定义了两个属性和。在ECMAScript中只支持实现继承，而且实现继承主要是依靠原型链来实现的。 1. 什么是原型链继承基本思想：利用原型让一个引用类型继承另一个...

sixleaves 2019-08-21 17:21 评论0 收藏0
js对象详解(JavaScript对象深度剖析，深度理解js对象)

摘要：对象详解对象深度剖析，深度理解对象这算是酝酿很久的一篇文章了。用空构造函数设置类名每个对象都共享相同属性每个对象共享一个方法版本，省内存。 js对象详解(JavaScript对象深度剖析，深度理解js对象) 这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言，从入门到精通到放弃一直会被对象这个问题围绕。平时发的文章基本都是开发中遇到的问题和对...

CatalpaFlat 2019-08-22 11:12 评论0 收藏0
js高级程序设计-面向对象的程序设计-阅读笔记

摘要：中又两种属性数据属性包含一个数据值的位置叫做数据属性和访问器属性和就是访问器属性数据属性而数据属性又有四个这样的特性是否可配置编辑删除属性默认是否可以被枚举即可被默认是否可写默认写不代表删除这里仅限修改属性的数据值默认是设置了一个空对象定 ECMAScript 中又两种属性:数据属性(包含一个数据值的位置叫做数据属性)和访问器属性(getter() 和 setter()就是访问器属性)...

AlphaWatch 2019-08-21 15:02 评论0 收藏0
浅析JavaScript中原型及constructor、__proto__、prototype的关系

摘要：搞清了构造函数和原型的区别后，就可以继续了。指向构造函数的原型对象，存在于实例与构造函数的原型对象之间。要注意的是当我们使用下面这种将整个重写的情况时，会切断构造函数和原型之间的联系，也就是说不再指向了，而是指向。前言先说一说为什么要搞清楚JavaScript的原型，因为这就是JS的根。JavaScript虽然不是一门传统的面向对象语言，但它有自己的类和继承机制，最重要的就是它采用...

wenzi 2019-08-26 13:54 评论0 收藏0