JS：普通对象，函数对象，原型机制，prototype，_proto_，constructor【诗书画唱】
proto：原型
个人学习秘诀：边看教程视频边做截图和文字笔记，多做截图和文字笔记对我的学习，提升，进步等等非常大。有时边创作视频边看教程视频做学习笔记等等，充分利用事情碎片化的间隔空隙时间等等。很多事其实都有空隙的时间可以利用，不可以浪费了，如果是全程都排得很满的事就可能不必如此利用空隙，因为会影响效率。有空隙的事情，一般如果能提高效率的话，就会选择利用空隙也进行做别的事。如果不高效，则很多事件的做法就失去了很大的意义。
先仿造后创新是我认为很好的入门的学习，创作，运用的好方法。——诗书画唱。
概括：
边看教程视频边做截图和文字笔记
一般可以用new调用声明的函数，new+函数的组合是object对象。Date()等都是函数对象。
推荐好文
个人对prototype的作用等的理解
一般函数对象等等的prototype属性是普通对象，但Function的prototype的属性是function
XXX._proto_等于new出XXX的XX的prototype这个原型（var XXX=new XX（）；等等）
_proto_是能让我们在js中实现“继承”的。
1、给所有的普通对象添加一个遍历的方法，打印出对象中的所有属性。
2、给所有的Date对象添加一个显示当前日期为yyyy年MM月dd日的方法，打印出当前日期
3、学会分辨出普通对象和函数对象
4、理解prototype属性
5、理解__proto__属性的用法
6、熟记new关键字的作用
1听课笔记.html
老师写的原型机制课堂代码例子等等.html
下面是可以区分js中的普通对象和函数对象的方法，使用typeof
constructor的使用
prototype的使用
_proto_的使用
原型的顶端就是null
所有的函数对象的prototype属性都是一个普通对象
唯独Function.prototype属性例外,他是一个函数对象
所有的对象都有__proto__属性
每个对象都会有一个constructor属性
通过typeof运算符来检测是否是普通对象还是函数对象
边看教程视频边做截图和文字笔记
一般可以用new调用声明的函数，new+函数的组合是object对象。Date()等都是函数对象。
原型机制的话其实还是很重要的，因为很封装，继承多态等等有关。
推荐好文：
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
个人对prototype的作用等的理解
一般函数对象等等的prototype属性是普通对象，但Function的prototype的属性是function
XXX._proto_等于new出XXX的XX的prototype这个原型（var XXX=new XX（）；等等）
_proto_是能让我们在js中实现“继承”的。
边看教程视频边做截图和文字笔记
1、给所有的普通对象添加一个遍历的方法，打印出对象中的所有属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//让所有的数组都有一个遍历的方法
var o1 = {action:'三连',name:'诗书画唱'};
var o2 ={hobby:'编程，看书，学习，创作音乐，创作视频',talent:'创作等等无限的才能'};
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();
/*不使用原型机制时就会要像下面的情况一样，一个一个地加遍历的方法。
其实很多东西之所有有用是因为可以统一设置一些东西，设置一个相当于设置了很多个，
做 一个的效果抵得很多个的效果就是高效。我创作视频等等时，也是尽量追求高效等等。
*/
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)
}
/*打印结果如下：
key:name,value:张三
key:age,value:20
key:addr,value:湖北武汉
key:sex,value:男
*/
</script>
<body>
</body>
</html>
2、给所有的Date对象添加一个显示当前日期为yyyy年MM月dd日的方法，打印出当前日期
<!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、学会分辨出普通对象和函数对象
4、理解prototype属性
5、理解__proto__属性的用法
6、熟记new关键字的作用
<!--
下面是可以区分js中的普通对象和函数对象的方法，使用typeof
constructor的使用
prototype的使用
_proto_的使用
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//下面是可以区分js中的普通对象和函数对象的方法，使用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运算符来检测是否是普通对象还是函数对象：
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);
//下面是可以区分js中的普通对象和函数对象的方法，使用typeof END
// constructor的使用 START
var Stu = function(n){
this.name = n;
}
//每个对象都会有一个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属性的
//一般情况下，函数对象的prototype属性是一个普通对象
console.log(typeof fn1.prototype);
Stu.prototype.sex = '男';
console.log(O1.sex);
console.log(O2.sex);
Stu.prototype.study = function(){
console.log(this.name + '正在点赞');
}
O1.study();
O2.study();
var s3 = new Stu('诗书画唱');
console.log(s3.sex);
s3.study();
//让所有的数组都有一个遍历的方法
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);
//所有的函数对象的prototype属性都是一个普通对象
//唯独Function.prototype属性例外,他是一个函数对象
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>
老师写的原型机制课堂代码例子等等.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//区分js中的普通对象和函数对象
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运算符来检测是否是普通对象还是函数对象
var now = new Date();
// console.log(typeof now);
// console.log(typeof Date);
var Stu = function(n){
this.name = n;
}
//每个对象都会有一个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属性的
//一般情况下，函数对象的prototype属性是一个普通对象
//console.log(typeof fn1.prototype);
Stu.prototype.sex = '男';
//console.log(s1.sex);
//console.log(s2.sex);
Stu.prototype.study = function(){
console.log(this.name + '正在学习');
}
//s1.study();
//s2.study();
var s3 = new Stu('张三');
//console.log(s3.sex);
//s3.study();
//让所有的数组都有一个遍历的方法
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);
//所有的函数对象的prototype属性都是一个普通对象
//唯独Function.prototype属性例外,他是一个函数对象
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>
