JavaScript(十三)面向對象
面向對象
面向對象的過程
通過new 構造函數 生成的對象來執行, 類似於事件的執行 this指向函數,然後再把這個函數賦值給一個實例 所以在函數內的this 就指到了實例上
function Person (age,lastname,) { this.age = age this.lastname = lastname; } var xiaoming = new Person(12,‘小明‘); console.log(xiaoming);
構造函數的首字母要大寫 大家默認的規範
對象中若 value 非函數 叫做屬性 若 是函數 叫方法
this的指向
普通對象,計時器,定時器,this 質量window
對象中的方法的this 指向這個對象,這個對象就和windows類似
綁定事件時 this指向 dom對象
閉包的this 指向上次運行的函數環境
自執行函數 指向window
對象中的定時器等的this仍是指向window 所以需要在對象內備份 this
實例與構造函數的關系
新生成的對象 有個屬性 constructor 就是這個對象的構造函數
實例 instanceof 構造函數 ---->true
console.log(xiaoming.constructor); console.log(xiaominginstanceof Person);
面向對象中的類的概念
就是 構造函數 ,同一個構造函數 new出來的 就屬於一個類
原型
構造函數方法存在一定的弊端,對於對象中一成不變的屬性 並不需要每次都new ,這樣很浪費性能,那麽 就把這用一成不變的存儲到 構造函數的原型上面
function Person (age,name,) { this.age = age; this.name = name; } Person.prototype.sex = ‘male‘; var xiaoming = new Person(12,‘xiaoming‘); console.log(xiaoming.sex);//這個性別就是從原型上繼承的
構造函數的原型除了以 fun.prototype.attr = ***; 的格式
還可以 寫整個 原型
Person.prototype = { age : 12, sex:‘male‘, constructor : Person //這裏如果不寫 new的實例調用constrotur 不會返回person 而返回 Object }
prototype和__proto__
prototype 所有的函數都有原型prototype
.__proto__ 所有的對象都有原型對象 ∵所有的對象都是用構造函數創建的
constructor,protype與__proto__
判斷這個實例是不是這個構造函數new的
構造函數的原型 .isProtypeOf(新對象)
利用 in 結合 hasOwnProperty判斷是不是從原型繼承來的屬性
for (var pro in xiaoming) { if(xiaoming.hasOwnProperty(pro)){ console.log(pro + ‘是本地屬性‘) } }
綁定構造函數 兩個對象(構造函數之間)繼承
1.call / apply 用父類 代替子類的this
父構造函數.call(this,[arguments])
function Foo () { this.lastName = ‘wang‘; } function Son (height) { Foo.call(this); //就這一步就可以繼承來 Foo的屬性 this.height = height; } var xw = new Son(180); console.log(xw.lastName); //wang
prototype的繼承方法
寫在perotype 上的屬性在生成實例的時候不會被 調用 所以 實例上的屬性由繼承來的更好 提取公共部分在原型上
function Foo() { this.firestName = ‘老王‘; } Foo.prototype.lastName = ‘wang‘; function Son() { this.firstName = ‘小王‘; } Son.prototype = new Foo(); Son.prototype.constrotur = Son; var xw = new Son(); console.log(xw.firstName); console.log(xw.lastName); console.log(xw.constrotur);
利用空的函數的prototype 實現繼承
function extend(parent, child) { var F = function(){}; F.prototype = parent.prototype; child.prototype = new F(); child.prototype.constructor = child; child.uber = parent.prototype; }
拷貝繼承 就是把parent.protype 上的屬性 遍歷拷貝到 child 的protype上
function copy(parent, child) { var p = parent.prototype; var c = child.prototype; for (var pro in p) { c[pro] = p[pro]; //這裏的pro是屬性名!!!!是字符串形式的 所以只能用[]的形式 } c.uber = p; }
JavaScript(十三)面向對象