js對象

js中我們可以定義如下對象

'use strict'
var Student = {
  name: 'Robot',
  height: 1.2,
  run: function () {
      console.log(this.name + ' is running...');
  }
};

var xiaoming = {
  name: '小明'
};

 將xiaoming指向student

//xiaoming的原型指向了對象student 小明從student類繼承過來
xiaoming.__proto__ = Student;

xiaoming對象中有name屬性,但是沒有run方法,可以調用對應的Student類的run方法

console.log(xiaoming.name);
xiaoming.run();

js的原型鏈和java的class的區別就在,他沒有class的概念,所有的對象都是實例,所謂繼承關係只不過是把一個對象的原型指向另一個對象而已,

var Bird = {
  fly:function() {
    console.log(this.name + "is flying");
  }
}
xiaoming.__proto__ = Bird;
xiaoming.fly();

這時候小明便成了一個鳥

不要直接用obj.__proto__去改變一個對象的原型,

可以使用構造函數 將name傳入即可。

var Student = {
  name:'Robot',
  height:1.2,
  run:function() {
    console.log(this.name + " is runing");
  }
}
function createStudent(name){
  var s = Object.create(Student);
  s.name = name;
  return s;
}
var xiaoming = createStudent('小明');
xiaoming.run();

js對每個創建的對象都會設置一個原型,指向他的原型對象.

當使用obj.xxx時,訪問一個對象的屬性時,現在當前對象上查找該屬性,如果沒有找到,再去原型對象上找,如果一直沒有找到,就一直上溯到object.prototype對象上找,最後,如果還是沒有找到,則只能返回undefined.

例如 array的原型對象便是

arr -> arr.prototype --> object.prototype -> null

實際上,函數也是一個對象,原型鏈是

foo -> function.prototype -> object.prototype -> null

 

可以用類來進行繼承

class Student{
  constructor(name){
    this.name = name;
  }
  hello() {
    alert("hello" + this.name);
  }
}
var xiaoming = new Student("小明");
xiaoming.hello();

在es6中。

class primaryStudent extends Student{
  constructor(name,grade){
    super(name); //父類的構造方法.
    this.grade = grade;
  }
  myGrade(){
    alert("i am a student");
  }
}
var pri = new primaryStudent("曹凱強",100);
pri.hello();
pri.myGrade();

可以調用父類的hello方法 或者自己子類的myGrade()方法。表示原型鏈對象來自Student

class轉化爲prototype的工具 babel

原型鏈的繼承參考廖雪峯的原型繼承

function Student(props){
  this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function() {
  alert("hello" + this.name);
}
//primaryStudent的構造函數
function PrimaryStudent(props){
  Student.call(this,props);
  this.grade = props.grade || 1;
}
//空函數
function F(){

}
//把F的原型指向student.prototype
F.prototype = Student.prototype;
//把primaryStudent指向一個新的F對象,F對象的原型正好指向student
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的構造函數修復爲PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

PrimaryStudent.prototype.getGrade = function() {
  return this.grade;
}// 創建xiaoming:
var xiaoming = new PrimaryStudent({
  name: '小明',
  grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2
console.log(
  // 驗證原型:
  xiaoming.__proto__ === PrimaryStudent.prototype); // true
 console.log(xiaoming.__proto__.__proto__ === Student.prototype); // true)

原型鏈的相關知識:

http://www.cnblogs.com/shuiyi/p/5305435.html

https://www.cnblogs.com/libin-1/p/5820550.html

這個__proto__指向的就是他的構造函數的prototype 而這個函數a的prototype對象的構造函數是誰呢? 沒錯就是開頭說到的Object.prototype。

當我們聲明一個函數B時就自動創建了prototype對象。而b是構造函數的B的實例,這是候b是一個對象,而我們知道,對象只有__proto__屬性。而這個屬性是指向他的構造函數(B)的prototype屬性。這時候我們來打印一下b

function B(b){

this.b = b;

}

var b = new B('lc');

console.log(b);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章