JavaScript学习总结之原型对象（整理分享）

本篇文章给大家带来了关于javascript中原型对象的相关知识，希望对大家有帮助。

你理解的类？类的特性有哪些？（封装，继承，多态）

类实际是一个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法也由两个组成部分：类声明和类表达式。类的主体都是在严格模式下执行的。

类的类体是由一对花括号{}中的部分，这是定义类成员的位置。【成员主要是方法或者构造函数】

立即学习“Java免费学习笔记（深入）”；

类的所有方法都等价于是定义在类的prototype属性上。在类的实列上调用方法，等同于在调用原型上的方法。

class A(){    constructor(){}    a(){}    b(){}}//等价于A.prototype={constructor(){},a(){},b(){}}

登录后复制

组成：

构造函数：

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能有一个构造函数，如果多个会报错，如果没有会默认添加一个空的constructor。其中constructor默认返回实列对象【即this】。一个构造函数可以使用super关键字来调用一个父类的构造函数。

属性

原型方法：该方法不需要加上function关键字，直接把函数的定义放进去就可以了。方法和方法之间不能用逗号分隔，会报错。

静态方法：使用static定义静态方法，调用静态方法，不能类的实列去调用，只能使用类去调用。

取值函数getter和存值函数setter:在类中使用get和set关键字，对某个属性设置存值和取值函数，拦截该属性的存取行为。

类语法：

类声明：使用class关键字

class Rectangle{    constructor(height,width){        this.height=height;        this.width=width;    }}

登录后复制

注意：函数声明和类声明的区别：类声明不会提升，函数声明会提升。

类表达式：类表达式可以是被命名的或匿名的。赋予一个命名类表达式的名称是类的主体的本地名称。

 let Rectangle=class{//匿名类      constructor(height,width){            this.height=height;            this.width=width;        } } let Rectangle= class Rectangle{//命名类      constructor(height,width){            this.height=height;            this.width=width;        } }

登录后复制

使用extends创建子类：

extends关键字在类声明或类表达式中用于创建一个类作为另一个类的子类。

使用super调用超类：

super关键字用于调用对象的父对象上的函数

类的特性：

–  封装：主要是通过函数，私有属性和方法的设置主要是通过块级作用域实现

–  多态：可以通过函数调用，因为参数是可以多变的

–  继承：主要通过原型链

当我们在new一个普通函数时候，发生了什么？

以构造器的 prototype 属性（注意与私有字段 [[prototype]] 的区分）为原型，创建新对象；

将this 和调用参数传给构造器，执行；

如果构造器返回的是对象，则返回，否则返回第一步创建的对象。

new 这样的行为，试图让函数对象的语法跟类变得相似，但是，它客观上提供了两种方式，一是在构造器中添加属性，二是在构造器的 prototype 属性上添加属性。

new后面的函数名一定要大写吗？

不是，主要是为了便于区分类。一般约束为大写

如何理解ProtoType?查找一个对象的某个属性的过程？

prototype:

每个函数都有一个特殊的属性叫做原型对象【prototype】

js是基于原型的语言，每个对象都拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。这些属性和方法时定义在对象的构造函数之上的prototype属性上，而非对象的实例本身。

原型对象可以再拥有原型对象，并从中继承方法和属性，一层一层，层层向上直到一个对象的原型对象为 null，这种就是原型链。

创建对象实例时，对象的实例和它的构造器之间建立一个链接【__proto__属性，是从构造函数的prototype属性派生的。也就是__proto__与构造函数的prototype是指向同个对象】Object.getPrototypeof(new Foobar())和Foobar.prototype是相等的。

Object.create()。是从指定的原型对象，创建一个新对象。var newObj=Object.create(obj)。则newObj的__proto__=obj

每个实列对象都从原型中继承了一个constructor属性。该属性指向了构造此实例的构造函数。

一般都是构造器中定义属性，在prototype定义方法。

一般由构造函数实列化出一个新对象，新对象的原型对象是一个constructor和一个Object的原型对象组成。而函数构造函数的原型对象是也是由另外一个constructor和一个Function的原型对象组成。

    var F=function(){};    Object.prototype.a=function(){};    Function.prototype.b=function(){};    var f=new F();    //上面的结果是，f能取到a,不能取到b.    详解：        1.f.__proto__===F.prototype        2.F.prototype.__proto__===Object.prototype(所以f可以访问a)        3.f.constructor===F        4.F.__proto__===Function.prototype(所以f.constructor.b可以访问)

登录后复制

查找属性的过程：

1.先查找自己身属性是否由包含该属性。

2.如果没有，才会沿着原型链，层层向上搜索，直到找到名字的属性

3.如果找到最后原型链的末尾，即最后的原型为null，那就是没有找到该属性。就会返回undefined

不同方法创建对象和原型链

1.使用语法结构创建对象

var o = {a: 1};// o 这个对象继承了 Object.prototype 上面的所有属性// o 自身没有名为 hasOwnProperty 的属性// hasOwnProperty 是 Object.prototype 的属性// 因此 o 继承了 Object.prototype 的 hasOwnProperty// Object.prototype 的原型为 null// 原型链如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup", "?"];// 数组都继承于 Array.prototype // (Array.prototype 中包含 indexOf, forEach 等方法)// 原型链如下:// a ---> Array.prototype ---> Object.prototype ---> nullfunction f(){return 2;}// 函数都继承于 Function.prototype// (Function.prototype 中包含 call, bind等方法)// 原型链如下:// f ---> Function.prototype ---> Object.prototype ---> null

登录后复制

2.使用构造函数创建对象

function A() {this.a = 1;this.b = 2;}A.prototype = {write: function(){    console.log(this.a);}};var a = new A();// a 是生成的对象，他的自身属性有 'a' 和 'b'。

登录后复制

3.使用Object.create()创建对象(ES5)

var a = {a: 1}; // a ---> Object.prototype ---> nullvar b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (继承而来)var c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullvar d = Object.create(null);// d ---> nullconsole.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype使用

登录后复制

4.使用class创建对象(ES6)

class A {constructor(a, b) {    this.a = a;    this.b = b;}}class B extends A {constructor(a,b,c) {    super(a, b);    this.c=c;}get ab() {    return this.a + this.b;}set d(d) {    this.a = d;    this.b = d;    this.c = d;}}var a= new A('a','b');//a的原型对象是 A.prototypevar b = new B('a','b','c');//    //b的原型对象是 B.prototype

登录后复制

当一个对象设置属性时都发生了什么？

如果对象包含普通数据访问属性，直接赋值只会修改属性值

    var a={b=1}//因为b是a的普通属性，数据类型为Number

    a.b=”a”；  //直接更改b的类型为String,且赋值为’a’.

如果对象找不到该属性，且原型链也找不到，就直接默认添加一个属性到该对象上。

    var a={}//b不是a的普通属性，且原型链上也没有

    a.b=”a”；  //直接在a上添加b的类型，为String,且赋值为’a’.

如果属性b，存在于原型链上

//在原型链上层存在名为b的普通数据访问属性并且没有标记为只读(writable:false)，那就会直接在a中添加一个名为b的新属性,且值为’a’。而原型链上的b就会被屏蔽掉：

    function A(){};    A.prototype.b=1;    var a=new A();    a.b='a';

登录后复制

//在原型链上层存在b，但是他被标记为只读，那么无法修改已有属性，或者在a中创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误，否则，这条赋值语句会被忽略，总之，不会发生屏蔽。

    function A(){    };A.prototype.b=1    Object.defineProperty(A.prototype,'b',{        configurable:true,        writable:false    })    var a=new A();    a.b='a';//结果a.b还是1

登录后复制

【相关推荐：javascript学习教程】

以上就是JavaScript学习总结之原型对象（整理分享）的详细内容，更多请关注【创想鸟】其它相关文章！