『笔记』JavaScript基础学习笔记 3
侧边栏壁纸
  • 累计撰写 61 篇文章
  • 累计收到 1,246 条评论

『笔记』JavaScript基础学习笔记 3

六六丶
2021-11-01 / 0 评论 / 237 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2021年11月22日,已超过61天没有更新,若内容或图片失效,请留言反馈。

this

解析器(浏览器)在调用函数时每次都会向函数内部传递进一个隐含的参数

1、this的定义

function fun(){
  //console.log("a=" +a+",b="+b);
  console.log(this.name);
}
fun();//输出object.window

//创建一个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//console.log(obj.sayName == fun);//输出true

var name = "全局的name属性"
obj.sayName();//输出object.object   [name:"孙悟空",sayName:fun]
//以函数形式调用,this时window
fun();
//以方法的形式调用,this是调用方法的对象
obj.sayName();
obj2.sayName();

2、this补充

//创建一个name变量
var name = "全局";

//创建一个fun()函数
function fun(){
  console.log(this.name);
}

//创建两个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//调用obj.sayName()时输出obj的名字
obj.sayName();//输出 孙悟空
obj2.sayName();//输出 沙和尚

对象

1、使用工厂方法创建对象

可以使用该方法大批量创建对象

使用工厂方法创建的对象使用的构造函数都是Object

所以创建的对象都是Object类型,导致无法区分出多种不同类型的对象

function createPerson(name,age,gender){
  //创建一个新的对象
  var obj = new Object();
  //向对象中添加属性
  obj.name = name;
  obj.age = age;
  obj.gender = gender;
  obj.sayName = function(){
    alert(this.name);
  }
  
  //将新的对象返回
  return obj;
}
var obj2 = createPerson("猪八戒",18,"男");
var obj3 = createPerson("白骨精",17,"女");
var obj4 = createPerson("蜘蛛精",16,"女");

console.log(obj2);
console.log(obj3);
console.log(obj4);
obj2.sayName();

2、构造函数

构造函数的执行流程:

使用同一个构造函数创建的对象,称为一类对象,也将构造函数称为一个类

使用instanceof可以检查一个对象是否是一个类的实例

语法: 对象 instanceof 构造函数

//创建一个构造函数,专门用来创建Person对象
var per = new Person();
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayNmae = function(){
    alert(this.name);
  };
}

var per = new Person("孙悟空",18,"男")
var per = new Person("玉兔精",17,"女")

console.log(per);

console.log(per instanceof Person);

this的情况:

3、构造函数修改

在Person构造函数中,为每一个对象都添加了一个sayName方法

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = function(){
    alert("Hello大家好,我是:"+this.name);
  };
}
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();
  • 方法是在构造函数内部创建的,构造函数每执行一次就会创建一个新的sayName方法, 也就是所有实例的sayName都是唯一的
  • 会导致构造函数每执行一次就会创建一个新的方法

可以将将sayName方法在全局作用域中定义(尽量不要将函数定义在全局作用域)

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = fun;
  };
}
//将sayName方法在全局作用域中定义
function fun(){
    alert("Hello大家好,我是:"+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();

4、原型对象

原型 prototype

创建的每一个函数,解析器都会向函数中添加一个属性prototype

kvhut6qq.png

function MyClass(){
  
}

//向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);//输出true
console.log(mc.a);//输出123
//向mc中添加a属性
mc.a = "我是mc中的a";
console.log(mc.a);//输出 我是mc中的a

mc.sayHello();//输出 弹窗hello

kvhvk7mj.png

创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中

这样不用分别为每一个对象添加,就可以使每个对象都具有这些属性和方法,也不会影响到全局作用域

例:

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向中添加一个方法
  // this.sayName = fun;
  };
}
//向原型中添加sayName方法
Person.prototype.sayName = function(){
    alert("Hello大家好,我是:"+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName(); // 输出弹窗

补充:

//创建一个构造函数
function MyClass(){
  
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的name";

var mc = new MyClass();
console.log(mc.name);
//使用in检查对象中是否含有某个属性时,如果对象中没有单数原型中有,也会返回true
console.log("name" in mc); //输出 true
//可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性
//使用该方法只有当对象自身含有该属性时才会返回true
console.log(mc.hasOwnProperty("name"));//返回false
console.log(mc.hasOwnProperty("hasOwnProperty"));//返回false
console.log(mc.__protp__.hasOwnProperty("hasOwnProperty"));//输出false
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出true

5、toString

function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
}

//修改Person原型中的toString
Person.prototype.toString = function(){
  return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
};

//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");

//console.log(per);
//console.log(per.toString);//与上面相同
/*输出Person[name=孙悟空,age=18,gender=男]
per.toString = function(){
  return "Person[name="+this.name",age="+this.age",gender="+this.gender"]"
}; */

var result = per.toString();
//console.log("result = "+result);
//console.log(per.__pro__.__pro__.hasOwnProperty("toString"));//返回true

console.log(per);
console.log(per2);

6、垃圾回收(GC)

  1. 当一个对象没有任何的变量或者属性对它进行引用时,将永远无法操作该对象,此时这种对象就是一个垃圾
  2. 这种对象过多会占用大量的内存空间,导致程序运行过慢,所以这种垃圾必须进行清理

kvqcs2sd.png

//创建一个对象
var obj = new Object();
//对对象进行各种操作。。。。
obj = null;

5

打赏

评论 (0)

取消