JS学习第七章

yanghongchen666 · 发表于 2021-2-15 07:10:31

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

Js中的this
--------------------------
个人感觉在学习Js中this的时候，跟python里面的self有这异曲同工之妙
当时在学习python一直搞不懂为什么必须要传self,学完js this感觉意义相同，也解除了当时困惑了许久的问题

/*
解析器在调用函数时每次都会向函数内部传递进一个隐含的参数
这个隐含的参数就是this， this指向的是一个对象，
这个对象我们称为函数执行的上下文对象，
根据函数的调用方式的不同，this会指向不同的对象
1.以函数形式调用，this永远都是window
2.以方法形式调用，this就是调用方法的那个对象
*/
function fun(a,b){
//console.log("a = " + a + ", b = " + b);
console.log(this.name);
}
fun(123,456);
//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var name = "全局name属性";
//console.log(obj.sayName == fun);
//以方法的形式调用，this是调用方法的对象
obj.sayName();//孙悟空
//以函数的形式调用，this是window，这里会输出“全局name属性”
fun();//全局name属性

复制代码

------------------------------------
JS使用工厂方法创建对象

学习完对象后会发现每次创建一个类似的对象非常的麻烦，
会有很多重复的东西，而编程为了就是简单所以我们可以批量生产对象

/*
使用工厂方法创建对象
a通过该方法可以大批量创建对象
*/
function createPerson(name,age,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
//这里通过this.name可以返回对象中的name
alert(this.name);
}
//将新的对象返回
return obj;
}
var obj2 = createPerson("猪八戒",26,"男");
var obj3 = createPerson("沙和尚",38,"男");
console.log(obj2);
console.log(obj3);
obj3.sayName();
obj2.sayName();
/*
用来创建狗的对象
*/
function creatDog(name,age){
var obj = {
name : name,
age : age,
sayHello : function(){
alert("旺旺~~");
}
};
return obj;
}
/*
使用工厂方法创建的对象，使用构造函数都是Object
所以创建的对象都是Object这个类型,
就导致我们无法取费除多种不同类型的对象
*/
//创建一个狗的对象
var doge = creatDoge("旺财",3);
dog.sayHello();
console.log(dog);
注意:
使用这种方法来创建对象其实并不推荐，因为在实际开发中肯定会跟其他人一起合作来开发，
这样的创建函数方法会特别浪费命名空间，以至于在合作中导致命名重叠而引发报错等一系列小麻烦，
接下来我们讲介绍构造函数来解决此问题
--------------------------------------------------
Js中的构造函数
JS中的构造函数其实就是Python中的类，当时学的时候很懵逼学完发现
咦?这不就是Python的类么瞬间恍然大悟哈哈哈哈~不知道有没有相同的小伙伴~~
/*
创建一个构造函数，专门用来创建Person对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用
构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数的对象，我们成为一类对象，也将一个构造函数成为一个类
我们将通过一个构造函数创建的对象，承诺为是该类的实例
this的情况:
1.当以函数的形式调用时，this是window
2.当以方法的形式调用时，谁调用方法this就是谁
3.当以构造函数的形式调用时，this就是新创建的实例
*/
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
}
}
function Dog(){
}
var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔",16,"女");
var per3 = new Person("嫦娥",20,"女");
var dog = new Dog();
/* console.log(per);
console.log(dog); */
/*
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
如果是，则返回true,否则返回fasle
*/
console.log(per instanceof Person);//true
console.log(dog instanceof Person);//false
/*
所有的对象都是Object的后代，
所以任何对象和Object做instanceof检查时都会返回true
*/
console.log(per instanceof Object);//true
console.log(dog instanceof Object);//true
上述代码创建构造函数时会发现一个问题，每当创建一个Person实例时，都会重新创建一个sayName的对象
这对我们来说是完全多余的所以我们修改了上述代码
/*
创建一个Person构建函数
-在Person构造函数中,为每一个对象都添加了一个sayName方法
目前我们的方法是在构造函数内部创建的，
也就是构造函数每执行一次，就会创建一个新的sayName方法
也就是所有实例的sayName都是唯一的.
这样就导致了构造函数执行一次就会创建一个新的方法
执行一万次，就会创建一万个新的方法,而1万个方法都是一模一样的
这是完全没有必要的，完全可以使所有的对象共享同一个方法
*/
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//将sayName方法在全局作用域中定义
/*
将函数定义在全局作用域中，污染了全局作用的命名空间
而且定义在全局作用域中，也很不安全
function fun(){
alert("大家好,我是" + this.name);
}
*/
//向prototype(原型对象)中添加一个方法
Person.prototype.sayName = function(){
alert("大家好，我是" + this.name);
}
//创建Person的实例
var person = new Person("孙悟空",18,"男");
var person2 = new Person("猪八戒",18,"男");
person.sayName();
person2.sayName();

复制代码

-----------------------------------
Js中的原型对象

/*
原型prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数通过构造函数调用时，它所创建的对象中都会有一个隐含的属性，
指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象一个属性或方法时，它会在对象自身中寻找，如果有则直接使用。
如果没有则会去原型对象中寻找，如果找到则直接使用
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象具有这些属性和方法了。
*/
function MyCalss(){
}
//向MyClass原型中添加属性a
MyClass.prototype.a = 123;
//向MyClass原型中添加方法
MyClass.prototype.sayHello = function(){
alert("hello");
}
var mc = new MyClass();
//console.log(MyClass.prototype);
console.log(mc.__proto__ == MyClass.prototype);
//向mc中添加a属性
mc.a = "我是mc中的a";
console.log(mc.a);
mc.sayHello();

复制代码

原型对象的补充:

/*
创建一个构造函数
*/
function MyClass(){
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";
mc.age = 18;
var mc = new MyClass();
//console.log(mc.name);
/*
使用in检查对象中是否有某个属性时没如果对象中没有但是原型中有，也会返回true
console.log("name " in mc);//true
*/
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有对象自身中含有属性时，才会返回true
console.log(mc.hasOwnProperty("name"));
console.log(mc.hasOwnProperty("hasOwnProperty"));//false
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//false
/*
原型对象也是对象，所以它也有原型，
当我们使用一个对象的属性或方法时，会在自身中寻找，
自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找,直到找到Object对象的原型
Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined.
*/
console.log(mc.__proto__.proto__.hasOwnProperty("hasOwnhProperty"));//true
console.log(mc.__proto__.__proto__)

复制代码

------------------------------------------------
Js修改toString()原型对象

不知道各位小可爱是否记得当初在使用toString()方法时，会[object,object]
这次我们可以通过修改原型对象从而把[object,object]改值改成我们想要的值

function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//创建person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",22,"男");
//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.name+",gender="+this.gender+"]";
}
//当我们直接在页面中打印一个对象时，实际上是输出的对象的toString()方法的返回值
//如果我们希望在输出对象时，不输出[Object Object],可以为对象添加一个toString()方法
//Person[name=孙悟空,age=18,gender=男]
/* per.toString = function(){
return "Person[name="+this.name+",age="+this.name+",gender="+this.gender+"]";
} */
var result = per.toString();
console.log("result = " + result );
//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
console.log(per);
console.log(per2);

复制代码

-----------------------------------------------
JS垃圾回收

生活处处有垃圾，JS中也不例外下面讲告诉小可爱们JS中是怎么区分垃圾的~~

/*
垃圾回收(GC)
-就像人生活的时间长了，会产生垃圾一样，程序运行过程中也会产生垃圾
这些垃圾积攒过多以后，会导致程序速度过慢
所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾
-当一个对象没有任何的变量或者属性对它进行引用，此时我们将永远无法操作该对象，
此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢
所以这种垃圾必须进行清理
-在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从我内从中销毁，
我们不需要也不能进行垃圾回收的操作
-我们需要做的只有将不再使用的对象设置为null即可.
*/
var obj = new Object();
//对对象进行各种操作......
obj = null;

复制代码

大家在生活中也要记得勤清理垃圾鸭~
-----------------------------------------
JS中的数组简介

/*
内建对象
宿主对象
自定义对象
数组(array)
-数组也是一个对象
-它和我们普通的对象功能类似，也是用来存储一些值的
-不同的是普通对象是使用字符串作为属性名的，
而数组是使用数字来作为索引操作元素
-索引:
从0开始的整数就是索引
-数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
语法:
*/
//创建数组对象
var arr = new Array();
//使用typeof检查一个数组，会返回object类型
//console.log(typeof arr);
/*
向数组中添加元素
语法:
数组[索引] = 值;
*/
//向arr数组中添加元素
arr[0] = 10;
arr[1] = 20;
arr[2] = 33;
arr[3] = 44;
//arr[10] = 55;
// arr[100] = 90;
/*
读取数组中的元素
语法:
数组[索引]
如果读取不存在的索引，不会报错而是返回undefined
*/
console.log(arr[0]);
/*
获取数组的长度
可以使用length属性来获取数组的长度(元素的个数)
语法:
数组.length
对于连续的数组，使用length可以获取数组的长度(元素的个数)
对于非连续数字，使用length会获取到数组的最大的索引+1
尽量不要创建非连续的数组
*/
console.loig(arr.length);
console.log(arr);
/*
修改length
如果修改的length大于原长度，则多出的部分会空出来
如果修改的length小于原长度，则多出的元素会被删除
*/
arr.length = 3;
console.log(arr.length);
console.log(arr);
arr[4] = 50;
//向数组最后的一个位置添加元素
/*
语法:
数组[数组.length] = 值;
*/
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;
console.log(arr);

复制代码

--------------------------------------

攸鱼 · 发表于 2021-2-15 10:24:52

罗巴乔 · 发表于 2021-2-18 14:32:50

学习的榜样啊

kkl44stupid · 发表于 2021-2-18 17:23:08

墨砚学长 · 发表于 2021-2-18 18:04:07

hornwong · 发表于 2021-2-18 20:38:18

感谢分享！

账号		自动登录	找回密码
密码			立即注册

[学习笔记] JS学习第七章

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

浏览过的版块