JS对象,原型

作者: DeeJay_Y | 来源:发表于2017-08-31 23:59 被阅读0次

面向对象

是一种思维方式
三大特点:继承,多态,封装
几个概念: 类,对象,属性,方法,成员,类成员,实例成员,静态类,抽象类

创建对象的几种方式:

1,工厂模式

    function createObj (name,age) {
        var obj = {
            name: name,
            age: age,
            printName: function () {
                console.log(this.name);
            }
        }
        return obj;
    }
    var obj = createObj('zhangsan',20);
    obj.printName();
//    解决了构造过程复杂,需要了解对象细节的问题,但是构造出来的对象类型都是Object,没有识别度。

解决了构造过程复杂,需要了解对象细节的问题,但是构造出来的对象类型都是Object,没有识别度。

2,构造函数创建实例

关于function的一些知识:

  • function作为构造函数(通过new操作符调用)的时候会返回一个类型为function的name的对象
  • function可以接受参数,可以根据参数来创建相同类型不同值的对象
  • function实例作用域内有一个constructor属性,这个属性就可以指示其构造器
//      构造函数创建实例
    function People (name,age) {
        this.name = name;
        this.age = age;
        this.sayName = function () {
            console.log(this.name);
        }
    }
    var p1 = new People('deejay',21); // new People表示将People函数作为构造函数来创建对象
    p1.sayName();
//构造函数在解决了上面的问题,同时为实例带来了类型,但可以注意到每个实例sayName方法实际上作用一样,但是每个实例要重复一遍,大量对象存在的时候是浪费内存

关于new操作符:

new运算符接受一个函数F及其参数: new F(arguments),这一过程分为3步:

  • 1.创建类的实例。这步是把一个空的对象的proto属性设为F.prototype p1 = {};
  • 2.初始化实例。函数F被传入参数并调用,关键字this被设定为该实例 p1.name = 'deejay' p1.sayName=... 此时的this为这个p1实例
    1. 返回实例 return p1
      构造函数内部一般不写return,默认return这个实例,但是如果写了return并且return的不是简单类型的话,就会真的return这个复杂类型

关于instanceof 操作符

instanceof 是一个操作符,可以判断对象是否为某个类型的实例
p1 instanceof People; // true
p1 instanceof Object; // true
instanceof判断的是对象
1 instanceof Number; // false

构造函数在解决了上面的问题,同时为实例带来了类型,但可以注意到每个实例sayName方法实际上作用一样,但是每个实例要重复一遍,大量对象存在的时候是浪费内存。

构造函数

  • 任何函数使用new表达式就是构造函数

  • 每个函数都自动添加一个名称为prototype属性,这是一个对象

  • 每个对象都有一个内部属性proto(规范中没有指定这个名称,但是浏览器都是这么实现的)指向其类型的prototype属性,类的实例也是对象,其proto属性指向的prototype

  • prototype图解:


    prototype

对于实例中的属性,如果存在则输出,不存在就会向构造函数的prototype中寻找。所以对于刚才的问题,可以这样解决:

  • 所有实例都会通过原型链引用到类型的prototype
  • prototype相当于特定类型所有实例都可以访问到的一个公共容器
  • 重复的东西移动到公共容器里放一份就好了

所以对于刚才的构造函数,可以这么写:

    function People (name,age) {
        this.name = name;
        this.age = age;
        People.prototype.sayName = function () {
            console.log(this.name);
        }
    }
    var p1 = new People('deejay',21);
    p1.sayName();

这个时候的对应关系是这样的:

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 原型和原型链的简单理解

    原型 在JS中原型就是prototype对象,用来表示类型之间的关系。 原型链 JS中对象和对象之间是有联系的,通...

  • Js面向对象

    一、Js面向对象 二、Js原型及原型链 1、原型 JavaScript 的每个对象都继承另一个父级对象,父级对象称...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • js基础(三)

    js基础 原型链和原型对象 ... ... js没有继承原型对象prototype通常用来添加公共的属性或行为且只...

  • 发现•分享—2019-01-17

    文章 JS JS 异步编程六种方案 JS基础—原型对象的那些事(一) JS基础—原型对象的那些事(二) CSS 综...

  • JS基础

    JS基础 JS运算 JS代码块 JS对象 原型对象 GC 正则表达式

  • web2

    js是面向对象的语言 是因为js的高度动态性的对象系统 面对对象变成:基于类 和 基于原型 js属于基于原型 性能...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 1.web前端基础储备之—js的面向对象风格以及原型和原型链

    javascript是面向对象风格,基于原型的语言。 目标:了解js面向对象和原型原型链的关系 面向对象(OOP)...

网友评论

    本文标题:JS对象,原型

    本文链接:https://www.haomeiwen.com/subject/ftqzdxtx.html