国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript面向對象知識點小結

rubyshen / 1417人閱讀

摘要:面向對象主要知識點小結,基于構造函數可以理解為通過即將創建的對象將類實例化給一個對象賦予屬性或者方法原型便于方法的重用與構造函數模式相比,使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。

JavaScript面向對象主要知識點小結,基于ECMAScript 5.

構造函數
function People(name){
    //this可以理解為通過new即將創建的對象
    this.name = name;
}
//將類實例化
var person = new People("Cassie Xu");
console.log(person.name);

給一個對象賦予屬性或者方法

function People(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name + "!");
  };
}
var person = new People("Cassie Xu");
person.greet();
原型(prototype)

why we use prototype? -> 便于方法的重用
與構造函數模式相比,使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。
運行時沒找到函數的方法時,對象會首先找它的類的prototype方法
Demo1

function People(name) {
  this.name = name;
}
People.prototype = {
  greet: function() {
    console.log("Hello, my name is " + this.name + "!");
  }
};
var person = new People("Cassie Xu");
person.greet();
//在每個實例化后的對象都會有一個__proto__屬性,類會將它的prototype賦給實例
//實例化一個對象時,People這個類首先會將person的__proto屬性指向People.prototype
console.log(person.__proto__ === People.prototype); // true

Demo2

var a = { foo: 1 };
var b = { bar: 2 };
b.__proto__ = a;
//b本身沒有foo屬性,但是b會繼續尋找__proto__屬性
console.log(b.foo); // 1
console.log(b.bar); // 2

var a = {};
console.log(a.__proto__); // {}
console.log(a.__proto__.__proto__); // null
原型鏈(prototype chain)
var a = {};
console.log(a.__proto__); // {}
console.log(a.__proto__.__proto__); // null
繼承(Inheritance)

Demo1

function Parent(){}
Parent.prototype = {
    greet: function(){
    console.log("hello world");
}
}
function Child(){}
//此方法適用于父類Child不需要傳參數
Child.prototype = new Parent();
var c = new Child();
//c首先尋找自身的方法,沒有great,所以找Child的原型方法,而Child.prototype等于Parent方法
c.greet(); //console.log("hello world");

上面的例子如果Parent有參數,將存在以下問題:

function Parent(a, b) {}
Parent.prototype.greet = function() {
  console.log("JavaScript rocks");
}
function Child(a, b) {}
Child.prototype = new Parent(); //something wrong?->new Parent()不能傳參數,否則參數一直不變
var child = new Child();
child.greet();

Demo2
解決父類參數問題

function Parent() {
    this.name = "xxx",
    this.date = "xxx"
}
Parent.prototype.greet = function() {
  console.log("JavaScript rocks");
}
function Child() {}
//此方法適用于
Child.prototype = Object.create(Parent.prototype);
//硬記的知識 
Child.prototype.constructor = Child;
var child = new Child();
child.greet();

Demo3:繼承的一個實例
創建一個矩形

function Rect(width,height){
    this._setupDOM(width,height);
}
Rect.prototype._setupDOM = function(width,height){
    this._dom = document.createElement("div");
    this._dom.style.width = width + "px";
    this._dom.style.height = height + "px";
};
Rect.prototype.appendToBody = function(){
    document.body.appendChild(this._dom);
};
function BlueRect(width,height){
  BlueRect._super.apply(this,arguments);
}
BlueRect.prototype = Object.create(Rect.prototype);
BlueRect.prototype.constructor = BlueRect;
BlueRect._super = Rect;
BlueRect.prototype._setupDOM = function(width,height){
  BlueRect._super.prototype._setupDOM.apply(this,arguments);
  this._dom.style.backgroundColor = "blue";
};
var br = new BlueRect(200,300);
br.appendToBody();
this關鍵字

Demo:

function Rect(width,height){
    //私有屬性加_
    this._dom = document.createElement("div");
    this._dom.style.width = width + "px";
    this._dom.style.height = height + "px";
    this._dom.style.backgroundColor = "red";
}
Rect.prototype.appendToBody = function(){
    document.body.appendChild(this._dom);
};
var rect = new Rect(100,100);
rect.appendToBody();

修改上面demo:

function Rect(width,height){
    this._setupDom(width,height);
}
Rect.prototype._setupDom = function(width,height){
    //私有屬性加_
    this._dom = document.createElement("div");
    this._dom.style.width = width + "px";
    this._dom.style.height = height + "px";
    this._dom.style.backgroundColor = "red";
};
Rect.prototype.appendToBody = function(){
    document.body.appendChild(this._dom);
};
var rect = new Rect(100,100);
rect.appendToBody();

var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    sayFullName: function () {
        console.log(this.firstName + " " + this.lastName); //=> "Penelope Barrymore"
        console.log(person.firstName + " " + person.lastName); //=> "Penelope Barrymore"
    }
};
person.sayFullName();

嚴格模式下的this

funtion foo(){
    "use strict";
    console.log(this) //undefined
}
強制修改函數上下文的方法 用Object.bind()代替this
function foo(a, b) {
  console.log(this);
  console.log(a + b);
}
var fooBinding = foo.bind({ name: "Cassie Xu" });
fooBinding(1, 2);

上面code將輸出

[object Object] {
  name: "Cassie Xu"
}
使用Object.call/Object.apply執行上下文

call/apply方法都為調用Object方法,區別是apply將所有參數放到一個數組中去

function foo(a, b) {
  console.log(this);
  console.log(a + b);
}
foo.call({name:"Cassie Xu"}, 1, 2);
foo.apply({name:"Cassie Xu"}, [1, 2]);
補充其他 自執行函數

why we use it? ->避免泄露全局變量

(function(c){
    var a = 1;
    var b = 2;
    console.log(a+b+c);
})(3)
// c = 3
閉包作用域
var a = {};
a.foo = function(callback) {
  // do something and call callback in whatever way
}
a.bar = function() {
  this.num = 1;
  var that = this;
  //閉包,這里that可以訪問到a.bar的作用域
  this.foo(function(newNum) {
    that.num = newNum;
  });
  console.log(this.num);
}
a.bar();

本文轉自 JavaScript面向對象知識點小結

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85538.html

相關文章

  • 編程模型(范式)小結

    摘要:參考鏈接面向對象編程模型現在的很多編程語言基本都具有面向對象的思想,比如等等,而面向對象的主要思想對象,類,繼承,封裝,多態比較容易理解,這里就不多多描述了。 前言 在我們的日常日發和學習生活中會常常遇到一些名詞,比如 命令式編程模型,聲明式編程模型,xxx語言是面向對象的等等,這個編程模型到處可見,但是始終搞不清是什么?什么語言又是什么編程模型,當你新接觸一門語言的時候,有些問題是需...

    miya 評論0 收藏0
  • javascript 面向對象版塊之理解對象

    摘要:用代碼可以這樣描述安全到達國外面向過程既然說了面向對象,那么與之對應的就是面向過程。小結在這篇文章中,介紹了什么是面向對象和面向過程,以及中對象的含義。 這是 javascript 面向對象版塊的第一篇文章,主要講解對面向對象思想的一個理解。先說說什么是對象,其實這個還真的不好說。我們可以把自己當成一個對象,或者過年的時候相親,找對象,那么你未來的老婆也是一個對象。我們就要一些屬性,比...

    lovXin 評論0 收藏0
  • HTML5 Canvas游戲開發實戰 PDF掃描版

    摘要:游戲開發實戰主要講解使用來開發和設計各類常見游戲的思路和技巧,在介紹相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧,在介紹HTML5 Canvas相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。在本書...

    cocopeak 評論0 收藏0
  • javascript基礎篇小結

    摘要:表示尚未存在的對象是一個有特殊意義的值。可以為變量賦值為,此時變量的值為已知狀態不是,即。用來初始化變量,清除變量內容,釋放內存結果為但含義不同。且它倆與所有其他值比較的結果都是。,需要兩個操作數同時轉為。 轉載請聲明出處 博客原文 隨手翻閱以前的學習筆記,順便整理一下放在這里,方便自己復習,也希望你有也有幫助吧 第一課時 入門基礎 知識點: 操作系統就是個應用程序 只要是應用...

    hiyang 評論0 收藏0

發表評論

0條評論

rubyshen

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<