JS：普通對象，函數(shù)對象，原型機(jī)制，prototype，_proto_，constructor【詩書畫唱】
proto：原型
個(gè)人學(xué)習(xí)秘訣：邊看教程視頻邊做截圖和文字筆記，多做截圖和文字筆記對我的學(xué)習(xí)，提升，進(jìn)步等等非常大。有時(shí)邊創(chuàng)作視頻邊看教程視頻做學(xué)習(xí)筆記等等，充分利用事情碎片化的間隔空隙時(shí)間等等。很多事其實(shí)都有空隙的時(shí)間可以利用，不可以浪費(fèi)了，如果是全程都排得很滿的事就可能不必如此利用空隙，因?yàn)闀?huì)影響效率。有空隙的事情，一般如果能提高效率的話，就會(huì)選擇利用空隙也進(jìn)行做別的事。如果不高效，則很多事件的做法就失去了很大的意義。
先仿造后創(chuàng)新是我認(rèn)為很好的入門的學(xué)習(xí)，創(chuàng)作，運(yùn)用的好方法?！姇嫵?。
概括：
邊看教程視頻邊做截圖和文字筆記
一般可以用new調(diào)用聲明的函數(shù)，new+函數(shù)的組合是object對象。Date()等都是函數(shù)對象。
推薦好文
個(gè)人對prototype的作用等的理解
一般函數(shù)對象等等的prototype屬性是普通對象，但Function的prototype的屬性是function
XXX._proto_等于new出XXX的XX的prototype這個(gè)原型（var XXX=new XX（）；等等）
_proto_是能讓我們在js中實(shí)現(xiàn)“繼承”的。
1、給所有的普通對象添加一個(gè)遍歷的方法，打印出對象中的所有屬性。
2、給所有的Date對象添加一個(gè)顯示當(dāng)前日期為yyyy年MM月dd日的方法，打印出當(dāng)前日期
3、學(xué)會(huì)分辨出普通對象和函數(shù)對象
4、理解prototype屬性
5、理解__proto__屬性的用法
6、熟記new關(guān)鍵字的作用
1聽課筆記.html
老師寫的原型機(jī)制課堂代碼例子等等.html?
下面是可以區(qū)分js中的普通對象和函數(shù)對象的方法，使用typeof
constructor的使用
prototype的使用
_proto_的使用
原型的頂端就是null
??所有的函數(shù)對象的prototype屬性都是一個(gè)普通對象
? 唯獨(dú)Function.prototype屬性例外,他是一個(gè)函數(shù)對象
所有的對象都有__proto__屬性
?每個(gè)對象都會(huì)有一個(gè)constructor屬性
通過typeof運(yùn)算符來檢測是否是普通對象還是函數(shù)對象
邊看教程視頻邊做截圖和文字筆記
一般可以用new調(diào)用聲明的函數(shù)，new+函數(shù)的組合是object對象。Date()等都是函數(shù)對象。
原型機(jī)制的話其實(shí)還是很重要的，因?yàn)楹芊庋b，繼承多態(tài)等等有關(guān)。
推薦好文：
https://blog.csdn.net/qq_42019025/article/details/80708446?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1328769.10560.16173325189592809&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
個(gè)人對prototype的作用等的理解
一般函數(shù)對象等等的prototype屬性是普通對象，但Function的prototype的屬性是function
XXX._proto_等于new出XXX的XX的prototype這個(gè)原型（var XXX=new XX（）；等等）
_proto_是能讓我們在js中實(shí)現(xiàn)“繼承”的。
邊看教程視頻邊做截圖和文字筆記
1、給所有的普通對象添加一個(gè)遍歷的方法，打印出對象中的所有屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
? //讓所有的數(shù)組都有一個(gè)遍歷的方法
? ? ? ? ? ?var o1 = {action:'三連',name:'詩書畫唱'};
? ? ? ? ? ? var o2 ={hobby:'編程，看書，學(xué)習(xí)，創(chuàng)作音樂，創(chuàng)作視頻',talent:'創(chuàng)作等等無限的才能'};
? ? ? ? ? ? Object.prototype.loadObject = function(){
? ? ? ? ? ? const keys = Object.keys(this)
? ? ? ? ? for(let i=0;i<keys.length;i++){
? ? const key = keys[i]
? ? const value=this[key]
? ? console.log("key:"+key+",value:"+value)
}
? ? ? ? ? ? }
? ? ? ? ? ? ? o1.loadObject();
? ? ? ? ? ? ? o2.loadObject();
/*不使用原型機(jī)制時(shí)就會(huì)要像下面的情況一樣，一個(gè)一個(gè)地加遍歷的方法。
?其實(shí)很多東西之所有有用是因?yàn)榭梢越y(tǒng)一設(shè)置一些東西，設(shè)置一個(gè)相當(dāng)于設(shè)置了很多個(gè)，
做 一個(gè)的效果抵得很多個(gè)的效果就是高效。我創(chuàng)作視頻等等時(shí)，也是盡量追求高效等等。
*/
const user = {
? ? name: '張三',
? ? age: 20,
? ? addr: '湖北武漢',
? ? sex: '男'
}
//遍歷key和value
const keys = Object.keys(user)
for(let i=0;i<keys.length;i++){
? ? const key = keys[i]
? ? const value=user[key]
? ? console.log("key:"+key+",value:"+value)
}
/*打印結(jié)果如下：
key:name,value:張三
key:age,value:20
key:addr,value:湖北武漢
key:sex,value:男
*/
</script>
<body>
</body>
</html>
2、給所有的Date對象添加一個(gè)顯示當(dāng)前日期為yyyy年MM月dd日的方法，打印出當(dāng)前日期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
Date.prototype.showNowTime= function(){
da = new Date();
? ? var year = da.getFullYear()+'年';
? ? var month = da.getMonth()+1+'月';
? ? var date = da.getDate()+'日';
? ? console.log([year,month,date].join(' '));
? ? ? ? ? ? }
var d1=new Date();
? d1.showNowTime();
? ? ? ? ? ??
? ? ? ? ? ??
??
</script>
<body>
</body>
</html>
3、學(xué)會(huì)分辨出普通對象和函數(shù)對象
4、理解prototype屬性
5、理解__proto__屬性的用法
6、熟記new關(guān)鍵字的作用
<!--
下面是可以區(qū)分js中的普通對象和函數(shù)對象的方法，使用typeof
constructor的使用
prototype的使用
_proto_的使用
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//下面是可以區(qū)分js中的普通對象和函數(shù)對象的方法，使用typeof? START
var S1 = {name:'詩書畫唱'};
var S2 = new Object();
function fn1(){
return {
age:66
};
}
var S3 = fn1();
var Dog = function(){}
var S4 = new Dog();
var S5 = [5,2,0];
var fn2 = new Function('alert(666);');
//通過typeof運(yùn)算符來檢測是否是普通對象還是函數(shù)對象：
console.log(typeof fn1);//function
console.log(typeof Dog);//function
console.log(typeof fn2);//function
console.log(typeof S1);//object
console.log(typeof S2);//object
console.log(typeof S3);//object
console.log(typeof S4);//object
console.log(typeof S5);//object
var now = new Date();
console.log(typeof now);
console.log(typeof Date);
//下面是可以區(qū)分js中的普通對象和函數(shù)對象的方法，使用typeof? END
// constructor的使用 START
? ? ? ? ? ? var Stu = function(n){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? }
? ? ? ? ? ? //每個(gè)對象都會(huì)有一個(gè)constructor屬性
? ? ? ? ? ? var O1 = new Stu('Tome');
? ? ? ? ? ? var O2 = new Stu('Kite');
? ? ? ? ? ? console.log(O1.constructor == Stu);
? ? ? ? ? ? console.log(O2.constructor == Stu);? ? ? ? ? ?
? ? ? ? ? ? console.log(S1.constructor == Object);
? ? ? ? ? ? console.log(S3.constructor == Object);
? ? ? ? ? ? console.log(S4.constructor == Dog);
? ? ? ? ? ? console.log(Dog.constructor == Function);
? ? ? ? ? ? console.log(Stu.constructor == Function);
? ? ? ? ? ? console.log(fn1.constructor == Function);
? ? ? ? ? ? console.log(Function.constructor == Function);
? ? ? ? ? ??
? ?// constructor的使用 END? ?
? ?
? ?
? ? ? ? ? ??
? ? ?//prototype的使用 START? ? ? ?
? ? ? ? ? ? //普通對象是沒有prototype屬性的
? ? ? ? ? ? //一般情況下，函數(shù)對象的prototype屬性是一個(gè)普通對象
? ? ? ? ? ? ? console.log(typeof fn1.prototype);
? ? ? ? ? ??
? ? ? ? ? ? Stu.prototype.sex = '男';
? ? ? ? ? ? ? console.log(O1.sex);
? ? ? ? ? ? ? console.log(O2.sex);
? ? ? ? ? ? Stu.prototype.study = function(){
? ? ? ? ? ? console.log(this.name + '正在點(diǎn)贊');
? ? ? ? ? ? }
? ? ? ? ? ? ? O1.study();
? ? ? ? ? ? ? O2.study();
? ? ? ? ? ? var s3 = new Stu('詩書畫唱');
? ? ? ? ? ? ? console.log(s3.sex);
? ? ? ? ? ? ? s3.study();
? ? ? ? ? ??
? ? ? ? ? ? //讓所有的數(shù)組都有一個(gè)遍歷的方法
? ? ? ? ? ? var arr1 = ['one','two','mee'];
? ? ? ? ? ? var arr2 = [4,5,6];
? ? ? ? ? ? Array.prototype.fe = function(){
? ? ? ? ? ? for(var i = 0;i < this.length;i ++) {
? ? ? ? ? ? console.log(this[i]);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? ? arr1.fe();
? ? ? ? ? ? ? arr2.fe();
? ? ? ? ? ??
? ? ? ? ? ? console.log(Stu.prototype.constructor == Stu);
? ? ? ? ? ? ? Stu.prototype = new Stu();
? ? ? ? ? ? console.log(Array.prototype.constructor == Array);
? ? ? ? ? ? ? Array.prototype = new Array();
? ? ? ? ? ??
? ? ? ? ? ? console.log(O1.constructor == Stu.prototype.constructor);
? ? ? ? ? ? console.log(arr1.constructor == Array.prototype.constructor);
? ? ? ? ? ? console.log(Object.constructor == Function.prototype.constructor);
? ? ? ? ? ??
? ? ? ? ? ? //所有的函數(shù)對象的prototype屬性都是一個(gè)普通對象
? ? ? ? ? ? //唯獨(dú)Function.prototype屬性例外,他是一個(gè)函數(shù)對象
? ? ? ? ? ? console.log(typeof Function.prototype);//function
? ? ? ? ? ? console.log(Function.prototype.prototype);//undefined
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? //prototype的使用 END? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
//_proto_的使用 START? ??
? ? ? ? ? ? //所有的對象都有__proto__屬性
? ? ? ? ? ? var Person = function(n){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? }
? ? ? ? ? ? Person.prototype.age = 66;
? ? ? ? ? ? Person.prototype.eat = function(){
? ? ? ? ? ? console.log('正在給詩書畫唱三連');
? ? ? ? ? ? }
? ? ? ? ? ? var p = new Person('詩書畫唱');
? ? ? ? ? ??
? ? ? ? ? ? var p = {};
? ? ? ? ? ? p.__proto__ = Person.prototype;
? ? ? ? ? ? Person.call(p,'詩書畫唱');
? ? ? ? ? ? console.log(p.__proto__ == Person.prototype);? ? ? ? ? ?
? ? ? ? ? ? console.log(O1.__proto__ == Object.prototype);
? ? ? ? ? ? console.log(arr1.__proto__ == Array.prototype);
? ? ? ? ? ? console.log(Person.__proto__ == Function.prototype);
? ? ? ? ? ? console.log(Date.__proto__ == Function.prototype);
? ? ? ? ? ??
? ? ? ? ? ? console.log(Person.prototype.__proto__ == Object.prototype);
? ? ? ? ? ? console.log(Object.__proto__ == Function.prototype);
? ? ? ? ? ? //原型的頂端就是null：
? ? ? ? ? ? console.log(Object.prototype.__proto__);//null
? ? ? ? ? ??
? ? ? ? ? ? Person.prototype.maxNumber = 666;
? ? ? ? ? ? Person.__proto__.minNumber = 6;
? ? ? ? ? ? console.log(p.maxNumber);//666
? ? ? ? ? ? console.log(p.minNumber);//undefined
? ? ? ? ? ? console.log(Person.minNumber);//6
? ? ? ? ? ??
? ? ? ? ? ??
//_proto_的使用 END??
</script>
</head>
<body>
</body>
</html>
老師寫的原型機(jī)制課堂代碼例子等等.html?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//區(qū)分js中的普通對象和函數(shù)對象
var o1 = {name:'Kite'};
var o2 = new Object();
function fn1(){
return {
age:18
};
}
var o3 = fn1();
var Dog = function(){}
var o4 = new Dog();
var o5 = [1,2,3];
var fn2 = new Function('alert(123);');
// console.log(typeof o1);//object
// console.log(typeof o2);//object
// console.log(typeof o3);//object
// console.log(typeof o4);//object
// console.log(typeof o5);//object
// console.log(typeof fn1);//function
// console.log(typeof Dog);//function
// console.log(typeof fn2);//function
//通過typeof運(yùn)算符來檢測是否是普通對象還是函數(shù)對象
var now = new Date();
// console.log(typeof now);
// console.log(typeof Date);
? ? ? ? ? ? var Stu = function(n){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? }
? ? ? ? ? ? //每個(gè)對象都會(huì)有一個(gè)constructor屬性
? ? ? ? ? ? var s1 = new Stu('Tome');
? ? ? ? ? ? var s2 = new Stu('Kite');
//? ? ? ? ? console.log(s1.constructor == Stu);
//? ? ? ? ? console.log(s2.constructor == Stu);? ? ? ? ? ?
//? ? ? ? ? console.log(o1.constructor == Object);
//? ? ? ? ? console.log(o3.constructor == Object);
//? ? ? ? ? console.log(o4.constructor == Dog);
//? ? ? ? ? console.log(Dog.constructor == Function);
//? ? ? ? ? console.log(Stu.constructor == Function);
//? ? ? ? ? console.log(fn1.constructor == Function);
//? ? ? ? ? console.log(Function.constructor == Function);
? ? ? ? ? ??
? ? ? ? ? ? //普通對象沒有prototype屬性的
? ? ? ? ? ? //一般情況下，函數(shù)對象的prototype屬性是一個(gè)普通對象
? ? ? ? ? ? //console.log(typeof fn1.prototype);
? ? ? ? ? ??
? ? ? ? ? ? Stu.prototype.sex = '男';
? ? ? ? ? ? //console.log(s1.sex);
? ? ? ? ? ? //console.log(s2.sex);
? ? ? ? ? ? Stu.prototype.study = function(){
? ? ? ? ? ? console.log(this.name + '正在學(xué)習(xí)');
? ? ? ? ? ? }
? ? ? ? ? ? //s1.study();
? ? ? ? ? ? //s2.study();
? ? ? ? ? ? var s3 = new Stu('張三');
? ? ? ? ? ? //console.log(s3.sex);
? ? ? ? ? ? //s3.study();
? ? ? ? ? ??
? ? ? ? ? ? //讓所有的數(shù)組都有一個(gè)遍歷的方法
? ? ? ? ? ? var arr1 = ['one','two','mee'];
? ? ? ? ? ? var arr2 = [4,5,6];
? ? ? ? ? ? Array.prototype.fe = function(){
? ? ? ? ? ? for(var i = 0;i < this.length;i ++) {
? ? ? ? ? ? console.log(this[i]);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //arr1.fe();
? ? ? ? ? ? //arr2.fe();
? ? ? ? ? ??
? ? ? ? ? ? console.log(Stu.prototype.constructor == Stu);
? ? ? ? ? ? //Stu.prototype = new Stu();
? ? ? ? ? ? console.log(Array.prototype.constructor == Array);
? ? ? ? ? ? //Array.prototype = new Array();
? ? ? ? ? ??
//? ? ? ? ? console.log(s1.constructor == Stu.prototype.constructor);
//? ? ? ? ? console.log(arr1.constructor == Array.prototype.constructor);
//? ? ? ? ? console.log(Object.constructor == Function.prototype.constructor);
? ? ? ? ? ??
? ? ? ? ? ? //所有的函數(shù)對象的prototype屬性都是一個(gè)普通對象
? ? ? ? ? ? //唯獨(dú)Function.prototype屬性例外,他是一個(gè)函數(shù)對象
? ? ? ? ? ? console.log(typeof Function.prototype);//function
? ? ? ? ? ? console.log(Function.prototype.prototype);//undefined
? ? ? ? ? ??
? ? ? ? ? ? //所有的對象都有__proto__屬性
? ? ? ? ? ? var Person = function(n){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? }
? ? ? ? ? ? Person.prototype.age = 18;
? ? ? ? ? ? Person.prototype.eat = function(){
? ? ? ? ? ? console.log('正在吃東西');
? ? ? ? ? ? }
? ? ? ? ? ? var p = new Person('小紅');
? ? ? ? ? ??
//? ? ? ? ? var p = {};
//? ? ? ? ? p.__proto__ = Person.prototype;
//? ? ? ? ? Person.call(p,'小紅');
//? ? ? ? ? console.log(p.__proto__ == Person.prototype);? ? ? ? ? ?
//? ? ? ? ? console.log(o1.__proto__ == Object.prototype);
//? ? ? ? ? console.log(arr1.__proto__ == Array.prototype);
//? ? ? ? ? console.log(Person.__proto__ == Function.prototype);
//? ? ? ? ? console.log(Date.__proto__ == Function.prototype);
//? ? ? ? ??
//? ? ? ? ? console.log(Person.prototype.__proto__ == Object.prototype);
//? ? ? ? ? console.log(Object.__proto__ == Function.prototype);
//? ? ? ? ? //原型的頂端就是null
//? ? ? ? ? console.log(Object.prototype.__proto__);//null
? ? ? ? ? ??
? ? ? ? ? ? Person.prototype.maxNumber = 9999;
? ? ? ? ? ? Person.__proto__.minNumber = 1;
? ? ? ? ? ? console.log(p.maxNumber);//9999
? ? ? ? ? ? console.log(p.minNumber);//undefined
? ? ? ? ? ? console.log(Person.minNumber);//1
</script>
</head>
<body>
</body>
</html>
