🍅 作者：阿珊
🍅 作者簡介：95后前端小姐姐，藍橋簽約作者，歡迎點贊、收藏、評論
🍅 粉絲專屬福利：知識體系、面試題庫、技識訓助、簡歷模板，文末公眾號領取
🍅 包郵送書（每周1-2次）：關注公眾號「資訊技術智庫」回復「送書」
?
手頭緊、時間緊、衣服緊、眉頭緊 ，這就是傳說中的前程四緊吧~
本JS基礎筆記系列一共有六篇相關的推文
本篇是第四篇：JS面向程序以及物件
這是筆者很早之前跟著視頻學JS記錄下來的筆記哦~
希望對你有所啟發~
目錄
01 編程思想
02 創建物件
03 工廠模式常見物件
04 自定義建構式創建物件
05 創建物件的圖解
06 字面量的方式創建物件
07 JSON格式的資料
08 簡單型別和復雜型別
09 內置物件
01 編程思想
編程思想：把一些生活中做事的經驗融入到程式中
面向程序：凡事都要親力親為,每件事的具體程序都要知道,注重的是程序
面向物件：根據需求找物件,所有的事都用物件來做,注重的是結果
面向物件特性：封裝、繼承、多型 (抽象性)
js不是面向物件的語言，但是可以模擬面向物件的思想
js是一門基于物件的語言：萬物皆物件
什么是物件?有特征和行為,具體特指的某一個事物
02 創建物件
1.呼叫系統的建構式創建物件
var 變數名= new Object();//實體化物件var obj = new Object();//物件有特征---屬性和行為---方法//添加屬性-----如何添加屬性? 物件.名字=值;obj.name = "阿珊";obj.age = 18;obj.sex = "女";//添加方法----如何添加方法? 物件.名字=函式;obj.eat = function () {console.log("我喜歡吃油炸榴蓮涼拌臭豆腐和大蒜");};obj.play = function () {console.log("我喜歡玩飛機模型");};obj.cook = function () {console.log("切菜");console.log("洗菜");console.log("把菜放進去");console.log("大火5分鐘");console.log("出鍋");console.log("涼水過一下");console.log("放料,吃");};console.log(obj.name);//獲取--輸出了console.log(obj.age);console.log(obj.sex);//方法的呼叫obj.eat();obj.play();obj.cook();
var smallDog=new Object();smallDog.name="大黃";smallDog.age=3;smallDog.color="黃色";smallDog.weight="250";smallDog.eat=function () {console.log("我要吃大骨頭");};smallDog.walk=function () {console.log("走一步搖尾巴");};smallDog.eat();//方法的呼叫smallDog.walk();???????
var phone=new Object();phone.size="iphone8";phone.color="黑色";phone.call=function () {console.log("打電話");};phone.sendMessage=function () {console.log("你干啥捏,我燒鍋爐呢");};phone.call();phone.sendMessage();
2.自定義建構式創建物件(結合第一種和需求通過工廠模式創建物件)
3.字面量的方式創建物件
03 工廠模式常見物件
如何獲取該變數(物件)是不是屬于什么型別的?
語法:
變數 instanceof 型別的名字----->布爾型別,true就是這種型別,false不是這種型別
在當前的物件的方法中,可以使用this關鍵字代表當前的物件
var person=new Object();person.name="小白";person.age=10;person.sayHi=function () {//在當前這個物件的方法中是可以訪問當前這個物件的屬性的值console.log("您好,吃了沒您,我叫:"+this.name);};//學生的物件var stu=new Object();stu.name="小芳";stu.age=18;stu.study=function () {console.log("學習,敲代碼,今天作業四遍,我今年"+this.age+"歲了");};//小狗的物件var dog=new Object();dog.name="哮天犬";dog.say=function () {console.log("汪汪...我是哮天犬");};//輸出人是不是人的型別console.log(person instanceof Object);console.log(stu instanceof Object);console.log(dog instanceof Object);//物件不能分辨出到底是屬于什么型別?//如何一次性創建多個物件?把創建物件的代碼封裝在一個函式中//工廠模式創建物件function createObject(name,age) {var obj = new Object();//創建物件//添加屬性obj.name = name;obj.age = age;//添加方法obj.sayHi = function () {console.log("阿涅哈斯誒呦,我叫:" + this.name + "我今年:" + this.age);};return obj;}//創建人的物件var per1 = createObject("小芳",20);per1.sayHi();//創建一個人的物件var per2 = createObject("小紅",30);per2.sayHi();
04 自定義建構式創建物件
自定義建構式創建物件，自己定義一個建構式，自定義建構式，創建物件
函式和建構式的區別：名字是不是大寫(首字母是大寫)
function Person(name,age) {this.name=name;this.age=age;this.sayHi=function () {console.log("我叫:"+this.name+",年齡是:"+this.age);};}//自定義建構式創建物件:先自定義一個建構式,創建物件var obj=new Person("小明",10);console.log(obj.name);console.log(obj.age);obj.sayHi();var obj2=new Person("小紅",20);console.log(obj2.name);console.log(obj2.age);obj2.sayHi();console.log(obj instanceof Person);console.log(obj2 instanceof Person);//自定義狗的建構式,創建物件function Dog(name,age,sex) {this.name=name;this.age=age;this.sex=sex;}var dog=new Dog("大黃",20,"男");console.log(dog instanceof Person);//falseconsole.log(dog instanceof Dog);
自定義建構式創建物件主要做了一下幾件事：
-
在記憶體中開辟(申請一塊空閑的空間)空間,存盤創建的新的物件
-
把this設定為當前的物件
-
設定物件的屬性和方法的值
-
把this這個物件回傳
function Person(name,age) {this.name=name;this.age=age;this.sayHi=function () {console.log("我叫:"+this.name+",年齡是:"+this.age);};}//創建物件var obj=new Person("小明",10);console.log(obj.name);console.log(obj.age);obj.sayHi();
05 創建物件的圖解
1 呼叫建構式創建物件
var obj=new Object();2.自定義建構式創建物件
function Person(name,age) {this.name=name;this.age=age;this.sayHi=function () {console.log("您好,我叫:"+this.name);};}
創建物件----實體化一個物件,并初始化???????
var per=new Person("小明",20);per.name="張三";
06 字面量的方式創建物件
var obj={};obj.name="小白";obj.age=10;obj.sayHi=function () {console.log("我是:"+this.name);};obj.sayHi();var obj2={name:"小明",age:20,sayHi:function () {console.log("我是:"+this.name);},eat:function () {console.log("吃了");}};obj2.sayHi();obj2.eat();
字面量創建物件的缺陷: 一次性的物件???????
var obj={name:"小明",age:38,sex:"女"};obj.name="小三";console.log(obj.name);點語法: 物件.名字=值; 物件.名字=函式;點,就完事了
注意：
-
代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存盤的是什么,如果是物件,就有物件的屬性和方法,如果是變數就是變數的作用
-
物件沒有什么,只要點了,通過點語法,那么就可以為物件添加屬性或者方法
var obj = {};//空物件obj.name = "看名字";obj.age = 10;obj.fly = function () {console.log("飛吧");};
設定和獲取屬性的另一種寫法???????
function Person(name,age) {this.name=name;this.age=age;this.play=function () {console.log("喜歡玩游戲");};}var obj=new Person("卡卡西",20);//obj.name="佐助";obj["name"]="佐助";console.log(obj["name"]);obj.play();obj["play"]();console.log(obj.name);console.log(obj.age);obj.play();
07 JSON格式的資料
物件:有屬性和方法,特指的某個事物
物件:一組無序屬性的集合的鍵值對,屬性的值可以是任意的型別
function Dog(name) {this.name=name;}function Person(name,age) {this.age=age;this.name=name;this.sex=true;this.dog={};this.play=function () {console.log("喜歡玩游戲");};}var sex=false;//男console.log(sex?"男":"女");var sex=true;//男console.log(sex?"男":"女")
JSON格式的資料:一般都是成對的,是鍵值對
json也是一個物件,資料都是成對的,一般json格式的資料無論是鍵還是值都是用雙引號括起來???????
var obj={name:"小明"};var json = {"name": "小明","age": "10","sex": "男"};
遍歷物件,是不能通過for回圈遍歷,無序
key是一個變數,這個變數中存盤的是該物件的所有的屬性的名字
for (var key in json) {console.log(key + "===========" + json[key]);}var key="name";console.log(json[key]);// 可以通過for-in回圈for(var key in json){//console.log(key);//json物件中的屬性的名字console.log(json[key]);}// 物件中確實有這個屬性物件.屬性名字 或者物件[屬性名字]//一個一個的遍歷出來var arr=[10,20,30];for(var i=0;i<arr.length;i++){console.log(arr[i]);}
08 簡單型別和復雜型別
原始資料型別：number,string,boolean,undefined, null,object
基本型別(簡單型別)，值型別: number,string,boolean
復雜型別(參考型別)：object
空型別:undefined：null
值型別的值在哪一塊空間中存盤? 堆疊中存盤
參考型別的值在哪一塊空間中存盤?物件在堆上存盤,地址在堆疊上存盤
var num=10;//值型別,值在堆疊上var obj={};//復雜型別,物件在堆,地址(參考)在堆疊
值型別之間傳遞,傳遞的是值
參考型別之間傳遞,傳遞的是地址(參考)
值型別作為函式的引數,傳遞的是值
參考型別作為函式的引數,傳遞的是地址
var num=10;var num2=num;//傳遞的值function f1(x) {x=100;}var num=10;f1(num);console.log(num);//var obj={name:"小明"};function f2(obj2) {obj2.name="小紅";}console.log(obj.name);//f2(obj);console.log(obj.name);//
09 內置物件
1.內置物件----js系統自帶的物件
-
Math
-
Date
-
String
-
Array
-
Object
//如何驗證變數是不是物件console.log(Array instanceof Object);var obj={};console.log(obj instanceof Object);
Math.PI----π---Math.E----常數的底數Math.abs(值)-----絕對值Math.ceil(值)----向上取整Math.floor(值)---向下取整console.log(Math.PI);console.log(Math.E);console.log(Math.abs(-2));console.log(Math.ceil(2.77));console.log(Math.floor(2.77));console.log(Math.fround(2.77));console.log(Math.max(2,2,88,5,3,44,777));console.log(Math.min(2,2,88,5,3,44,777));console.log(Math.pow(2,4));//16console.log(Math.sqrt(2,4));//16console.log(Math.random());//16
2.自定義物件—自己定義的建構式創建的物件
3.瀏覽器物件—BOM
?
添加公眾號「資訊技術智庫」：
🍅 硬核資料：20G，8大類資料，關注即可領取（PPT模板、簡歷模板、技術資料）
🍅 技識訓助：技術群大佬指點迷津，你的問題可能不是問題，求資源在群里喊一聲，
🍅 面試題庫：由各個技術群小伙伴們共同投稿，熱乎的大廠面試真題，持續更新中，
🍅 知識體系：含編程語言、演算法、大資料生態圈組件（Mysql、Hive、Spark、Flink）、資料倉庫、前端等，
👇👇送書抽獎丨技識訓助丨粉絲福利👇👇
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/309535.html
標籤：其他