JavaScript】JavaScript 原型,原型链 ? 有什么特点?

2021-11-10 16:42发布

12条回答
刘小碗
2楼 · 2021-11-10 16:44

1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 

2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链

我是大脸猫
3楼 · 2021-11-11 09:05

每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,

如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,

于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.__proto__


特点:

JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。


当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,

就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。

1
2
3
4
5
6
7
8
9
10
function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
  return this.name;
}
var person = new Func(); // 现在可以参考
var person = Object.create(oldObject);
console.log(person.getInfo());//它拥有了Func的属性和方法
//"Sean"
console.log(Func.prototype);// Func { name="Sean", getInfo=function()}


夏虫语冰
4楼 · 2021-11-11 11:50

1.1 一切皆为对象
JavaScript里所有的东西都是对象. 对象是属性的集合. 数字, 字符串, 布尔值等原始值是"伪对象", 它们同样拥有属性, 但是是在栈上分配并按值传递. 而其他的对象是堆上分配并按引用传递.
一个很重要的概念是, 函数也是对象, 能够作为变量的值, 返回值, 参数或者属性的值. 函数对象特殊的地方是能通过"xxx()"语法执行包含在xxx函数对象内的代码. 因为这一特殊性, typeof xxx 将会返回function, 但这只是一种便利设施.

1.2 对象的属性可以动态添加和删除

var foo = new Object();
// 为foo对象添加bar属性
foo.bar = "foobar";
alert(foo.bar); //foobar
// 删除foo对象的bar属性
delete foo.bar;
alert(foo.bar); //undefined


1.3 除了宿主对象, 其它对象皆由构造函数创建
要有对象, 就先要有创建对象的方法. 
在C++/Java等语言, 这个方法就是实例化XXX类的一个实例xxx.
而在JavaScript的世界里实际没有类的东西, 当然仍然可以用"类"和"实例"等惯用语来描述JavaScript中类似的行为, 但其机制是完全不同的. JavaScript的对象是由构造函数创建的, 每个对象都有constructor属性表示创建该对象的构造函数:

function Test() { this.a = "hello"; }
var test = new Test(); // 由Test构造函数创建
alert(test.constructor);

var o = { a: "hello" };
//实际相当于
var o_ = new Object();
o_.a = "hello"; // 由Object构造函数创建
alert(o.constructor);

构造函数也是对象, 那构造函数是由什么创建? 内建的Function函数:

function Test(a, b)
{
alert(a+b);
}
// 相当于:
Test = new Function(["a", "b"], "alert(a+b);");

Function函数又是由什么创建? 实际上Function是本机代码实现的固有对象. 不过为了一致性, Function也有constructor属性, 该属性指向它自己. 接上面的代码:

/* 输出 function Function(){
[native code]
}
*/
alert(Test.constructor);

alert(Test.constructor.constructor === Test.constructor); // true
alert(Test.constructor === Object.constructor); // true


2 原型prototype
2.1 prototype的概念
prototype是构造函数的一个属性, 该属性指向一个对象. 而这个对象将作为该构造函数所创建的所有实例的基引用(base reference), 可以把对象的基引用想像成一个自动创建的隐藏属性. 当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若不, 则查找基引用指向的对象的属性(如果还找不到实际上还会沿着原型链向上查找,  直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到.
原型默认为Object的新实例, 由于仍是对象, 故可以给该对象添加新的属性:

// prototype默认为new Object(); 为了方便, 记为p_obj
function Person(name) {
this.name = name;
}

// 为 p_obj 增加 sayName 属性
Person.prototype.sayName = function(){
alert(this.name);
}

var john = new Person("John"); // john 的 base reference指向p_obj
var eric = new Person("Eric");  // eric 的 base reference也是指向p_obj

// 注意sayName代码中的this将指向实例化后的对象(this绑定)
john.sayName(); // john对象本身没有sayName属性, 于是访问原型对象p_obj的sayName属性
eric.sayName(); // 访问同一个原型对象p_obj的sayName属性


var tmp = Person.prototype;
tmp.boss = "David";
// 于这个运行点, p_obj已经被修改
// 根据上述属性访问流程, 新的修改(boss属性)能反映到所有的实例, 包括已经创建和即将创建的
alert("John's boss is " + john.boss);
alert("Eric's boss is " + eric.boss);


// hisCar和sayCar属性将增加到john对象而不是p_obj对象..
john.hisCar = "Audi";
john.sayCar = function(){
alert(this.name + " has a car of " + this.hisCar);
}
john.sayCar();
// ..因此下一句将错误, 因为eric对象本身和原型p_obj都没有sayName属性
/* eric.sayCar(); */


2.2 原型链
除了能修改prototype指向的对象, 还能修改prototype指向哪一个对象, 即为prototype赋予一个不同的对象. 这可以实现一种简单的继承:

function Superman() {}
Superman.prototype.sayHello = function(){
alert("I'm a superman.");
}

function SupermanCan(skill){
this.skill = skill;
}
// 为prototype赋予Superman的实例..
SupermanCan.prototype = new Superman();
// ..再动态添加新的属性
SupermanCan.prototype.sayMore = function(){
this.sayHello(); // 调用"父类"的方法
alert("I can " + this.skill);
}

var david = new SupermanCan("fly");
// output: I'm a superman. I can fly
david.sayMore();

如果先实例化出一个对象, 再为构造函数prototype赋予一个不同的对象, 将会: 已经创建的对象的基引用不变, 将来创建的对象的基引用为新的原型对象:

var f1 = {echo: function() { alert("sound"); } };
function Foo() {};
var foo = new Foo(); // foo的基引用指向Object实例
Foo.prototype = f1;
/* 未定义, 因为这是"foo对象自己或者基引用指向的对象有echo属性吗?"
而不是"foo对象自己或者Foo.prototype指向的对象有echo属性吗?" */
alert(foo.echo);

var foo2 = new Foo(); // foo2的基引用指f1对象
foo2.echo(); // output: sound

所有的构造函数的prototype都不能为空, 就是说Superman.prototype = null 会被解释引擎无视;  另一方面, Object构造函数也有prototype属性(该属性是只读的, 可以为原型增加属性,但不能赋予不同的对象), 故因此可以有多层的原型链, 但原型链的根必定会是Object.prototype . 这意味着给Object.prototype增加属性影响到所有对象:

Object.prototype.echo = function() {
alert("hello");
}

// echo属性将增加到所有对象固有对象和自定义对象

var arr = new Array();
arr.echo();
Array.echo();

function ObjCons()    {
this.dummy = "d";
}
var obj = new ObjCons();
obj.echo();
ObjCons.echo();


3. 构造函数和new的实质
构造函数是一个地地道道的函数, 一个函数之所以能成为构造函数, 是因为new运算符:

this.msg = "window";

function Test()
{
alert(this.msg);
}

Test(); // window
var test = new Test(); // undefined. 因为test对象没有定义msg属性

二者区别在于如何切入对象: Test() 在某个对象(例子中为window)的上下文上执行代码, 即this指向这个对象; new Test()创建一个新对象, 并以这个新的对象为上下文(this指向新对象)执行代码, 然后返回这个新对象. 
假如有个函数:

function Test() {
var dummy = "have money";
this.wish = dummy;
doSomeThing();

}

结合以上的所有论述, 可以推测new Test()行为的伪代码表示为:
创建一个新对象temp;
temp.constructor = Test;
temp.(base reference) = Test.prototype; // 这一句先于代码体执行, 意味着构造函数里的this.xxx能访问原型对象的属性xxx
bind: this = temp; // 将this绑定到temp对象
// 开始执行函数代码
var dummy = "have money";
this.wish = dummy; // 为temp对象添加wish属性
doSomeThing();
....
// 结束执行函数代码
return temp;
这个未必会符合内部的二进制实现, 但却能很好地解释了JavaScript的特性.


一个Ai
5楼 · 2021-11-11 15:41

  什么是原型对象: 集中存储同一类型的所有子对象,共用成员的父对象

    如何:

     创建: 不用创建,买一赠一

       每创建一个构造函数,都附赠一个原型对象

     继承: 在创建子对象时,new的第2步自动设置子对象继承构造函数的原型对象

     访问成员: 优先访问私有成员

              自己没有,就去父对象(原型对象)中查找

     将成员添加到原型对象中:

      构造函数.prototype.成员=值

  私有属性和公有属性:

   私有属性: 保存在当前对象本地,仅归当前对象独有的属性

   公有属性: 保存在父对象中,所有子对象共有的属性

   读取属性值: 子对象.属性

   修改属性值:  私有属性,必须通过子对象自己修改

                 公有属性,只能用原型对象修改!

 

 原型链:

  什么是: 由多级父对象逐级继承,形成的链式结构,通过__proto__实现子类共用原型链上的属性和方法,向上查找

原型链的运行机制:

1. 所有的函数数据类型都天生自带一个属性:prototype(原型),这个属性的值是一个对象,浏览器会默认给它开辟一个堆内存

2. 在浏览器给prototype开辟的堆内存中有一个天生自带的属性:constructor,这个属性存储的值是当前函数本身

3. 每一个对象都有一个__proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定它是谁的实例,都是Object的实例)


回答: 2021-11-11 15:41

  什么是原型对象: 集中存储同一类型的所有子对象,共用成员的父对象

    如何:

     创建: 不用创建,买一赠一

       每创建一个构造函数,都附赠一个原型对象

     继承: 在创建子对象时,new的第2步自动设置子对象继承构造函数的原型对象

     访问成员: 优先访问私有成员

              自己没有,就去父对象(原型对象)中查找

     将成员添加到原型对象中:

      构造函数.prototype.成员=值

  私有属性和公有属性:

   私有属性: 保存在当前对象本地,仅归当前对象独有的属性

   公有属性: 保存在父对象中,所有子对象共有的属性

   读取属性值: 子对象.属性

   修改属性值:  私有属性,必须通过子对象自己修改

                 公有属性,只能用原型对象修改!

 

 原型链:

  什么是: 由多级父对象逐级继承,形成的链式结构,通过__proto__实现子类共用原型链上的属性和方法,向上查找

原型链的运行机制:

1. 所有的函数数据类型都天生自带一个属性:prototype(原型),这个属性的值是一个对象,浏览器会默认给它开辟一个堆内存

2. 在浏览器给prototype开辟的堆内存中有一个天生自带的属性:constructor,这个属性存储的值是当前函数本身

3. 每一个对象都有一个__proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定它是谁的实例,都是Object的实例)


回答: 2021-11-11 15:41

  什么是原型对象: 集中存储同一类型的所有子对象,共用成员的父对象

    如何:

     创建: 不用创建,买一赠一

       每创建一个构造函数,都附赠一个原型对象

     继承: 在创建子对象时,new的第2步自动设置子对象继承构造函数的原型对象

     访问成员: 优先访问私有成员

              自己没有,就去父对象(原型对象)中查找

     将成员添加到原型对象中:

      构造函数.prototype.成员=值

  私有属性和公有属性:

   私有属性: 保存在当前对象本地,仅归当前对象独有的属性

   公有属性: 保存在父对象中,所有子对象共有的属性

   读取属性值: 子对象.属性

   修改属性值:  私有属性,必须通过子对象自己修改

                 公有属性,只能用原型对象修改!

 

 原型链:

  什么是: 由多级父对象逐级继承,形成的链式结构,通过__proto__实现子类共用原型链上的属性和方法,向上查找

原型链的运行机制:

1. 所有的函数数据类型都天生自带一个属性:prototype(原型),这个属性的值是一个对象,浏览器会默认给它开辟一个堆内存

2. 在浏览器给prototype开辟的堆内存中有一个天生自带的属性:constructor,这个属性存储的值是当前函数本身

3. 每一个对象都有一个__proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定它是谁的实例,都是Object的实例)


人间何须值得
6楼 · 2021-11-12 09:17

javascript原型,原型链特点:原型链实现了继承。

JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。


IT学习助手 - qq:2676427015
7楼 · 2021-11-13 15:14

  原型链一直是个很抽象的概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来。
  基础知识在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链。
  访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性.原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的.

帅帅马
8楼 · 2021-11-14 10:30

javascript原型,原型链特点:原型链实现了继承。

JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。

原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。

var arr = [];

arr.map === Array.prototype.map //arr.map

是从arr.__proto__上继承下来的,arr.__proto__也就是Array.prototype。

扩展资料:

1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

2.每个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。

3.原型链实现了继承。原型链存在两个问题:a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时,无法向超类型的构造函数中传递参数。


1.原型 JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到...

2.原型链 原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链


回答: 2021-11-16 11:21

原型 JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型

相关问题推荐

没有解决我的问题,去提问