JS-Object(2) 原型对象 ，prototype属性。

  1. 基础✅
  2. prototype(✅)
  3. JS中的继承
  4. 使用JSON数据
  5. 构建对象实战

 

 

基础

关键字"this"指向了当前代码运行时的对象( 原文：the current object the code is being written inside )

 

 

定义template, 创建实际对象 object instances

constructor function:  JavaScript 用一种称为构建函数的特殊函数来定义对象和它们的特征。

当一个对象实例需要从类中创建出来时，类的构造函数就会运行来创建这个实例。

这种创建对象实例的过程称之为实例化-实例对象被类实例化

 

非经典的OOP：object-oriented programming

不像“经典”的面向对象的语言，从构建函数创建的新实例的特征并非全盘复制，而是通过一个叫做原形链的参考链链接过去的。（参见 Object prototypes），所以这并非真正的实例，严格的讲， JavaScript 在对象间使用和其它语言的共享机制不同。

 



传统写法：


必须写return xxxx

function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m' + this.name + ".")
  };
  return obj
}




 




创建一个constructor function
⚠️，构造器名字用首字母大写的name.

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m' + this.name + ".")
  };
}

然后用构造器函数来创建一个实例
var person1 = new Person('Bob')




 


类似：new Vue({}) ； 实例化一个Vue对象。


需要⚠️：


创建新实例时，如果方法（这里是greeting）定义在构造器的函数体中，每次实例化都要定义这个方法，这不明智 ideal。


因此，使用prototype来定义函数。让实例继承这个方法就好， 这是构造器定义的定义约定。


Person.prototype.greeting = function() { ... } 


 


小结：


多个创建object instance的方法：


    

  • 声明一个对象字面量 literal  (传统的方法)
    • 

  • 使用constructor function  （标准的方法）
    • 

  • 使用Object()构造器  　　    

      

    • 

      

      var person1 = new Object();
然后再添加特性或方法，或者直接再new Object({添加})：
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
};
      

      

      • 

    

    • 

  • 使用JS内建的create()方法：（用于继承）
    • 

  • 

    

    之前以及定义了person1对象

使用create方法，继承了person1的特性和方法：
(本质上是指定一个原型对象)
var person2 = Object.create(person1);
person2.name
person2.greeting()  
    

    

    • 





 


 


Prototype 


JS常常被描述为基于原型的语言。


每个对象都包含一个原型对象（我的理解就是类）。对象以其原型对象为模版，从原型对象继承方法和特性。


 


一个对象的原型对象也可以包含一个原型对象，从中继承方法和特性，层层类推。这涉及到原型链。prototype chain. （我的理解类似Ruby中的类的继承，形成一个祖先链。）


 


这就解释了为什么一个对象拥有定义在其他对象中的属性和方法，


因为这个对象继承了它的原型对象中的属性或方法。


 


对象和类：传统和JavaScript


    

  • 传统的OOP, 首先定义类，然后以此创建实例，类的属性和方法被复制到实例上（这和Ruby语法不一样）。
    • 

  • javascript, 在对象实例和它的构造器之间建立一个链接：__proto__属性, 之后通过上朔原型链prototype chain，在构造器中找到这些属性和方法。
    • 



　　


使用JavaScript中的prototype


所有JS的函数有一个特殊的属性， prototype。


实例的_proto_属性就是它的构造器的prototype。(instance._proto_等于Constructor.prototype)




function doSomething() {};

doSomething.prototype.foo = "bar";
// 实例化doSometing函数
var instance = new doSometing();
// 给实例添加属性
instance.prop = 'hello';

//实例的_proto_属性就是它的构造器的prototype。


doSomething.prototype =>
{foo: "bar", constructor: ƒ}
instance.__proto__　　=>
{foo: "bar", constructor: ƒ} 












 


 


类似Ruby，通过_prop_这个链接向上级构造函数（类）找属性或方法


访问实例instance一个属性foo(instance.foo)，如果实例属性中没有找到，则找它的构造器doSomething的prototype对象中的属性：


    

  • 如果找到，返回值。（这里的案例找到并返回“bar”）
    • 








如果没有，浏览器就会上溯，去doSomething的prototype对象中的_proto_中找, 即它的原型window.Object的propotype中去找。

      

    • 如果还没找到，证明浏览器上所有声明了的_proto_上都不存在这个属性，返回undefined
      • 









    











⚠️，强调一下，方法和属性没有被copy，而是顺着prototype chain向上找，找到就引用。




function doSomething(){}
doSomething.prototype.foo = "barr";
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";

结果
"doSomeInstancing.prop:      some value"
"doSomeInstancing.foo:       barr"
"doSomething.prop:           undefined"
"doSomething.foo:            undefined"
"doSomething.prototype.prop: undefined"
"doSomething.prototype.foo:  barr"




 


⚠️： obj._proto_ 方法，现在被Object.getPrototypeOf(obj)取代


 


小结：prototype对象：是继承成员被定义的地方。


    

  • 只有在prototype中被定义的属性／方法，才能够通过_proto_传递下去，被继承。
    • 

  • 那些非prototype属性／方法，不会继承。只能被构造器自身使用。
    • 



 


javascript实例复制他的构造函数对象中的prototype中的属性：


假设list是Person.prototype中的属性, 值是“apple”。person1是Person的实例：


    

  • read： (我的理解reference)调用person1.list，得到"apple"。这是person1实例通过原型链_proto_向上访问得到‘apple’值。
    • 

  • write:  （我的理解copy）调用person1.list = 'orange'，list属性被copy到person1中。此时list：“orange”成为person1对象中的属性／值。
    • 



 




  


constructor属性


实例对象会从原型中继承一个constructor属性：该属性指向了用于构造次实例对象的构造函数。




 


person1.constructor返回构造person1实例对象的构造函数对象。




person2.constructor =>
ƒ Person(name){
  this.name = name;
  this.greeting = function() {
      alert(this.name + "!!!")
  };
}




 


因为返回构造器，可以利用这点新建一个实例对象:


var person3 = new person1.constructor("Snow")


另外，使用person1.constructor.name返回一个构造器的名字


 




 


 


修改原型


给构造器函数的prototype增加的方法, 都可以在它的实例中使用，这代表了继承。


总结：


构造器函数的建立方法：


    

  • 在函数体中定义属性
    • 

  • 在prototype中定义方法
    • 



 




// 构造器及其属性定义

function Test(a,b,c,d) {
  // 属性定义
};

// 定义第一个方法

Test.prototype.x = function () { ... }

// 定义第二个方法

Test.prototype.y = function () { ... }

// 等等……




 






		

		
posted @ 
2018-09-19 17:15 
Mr-chen 
阅读(1467) 
评论(0) 
编辑 
收藏 
举报