1.JavaScript中提供了一个默认的类Object, 我们可以通过这个类来创建对象
2.由于我们是使用系统默认的类创建的对象, 所以系统不知道我们想要什么属性和行为, 所以我们必须手动的添加我们想要的属性和行为
3.如何给一个对象添加属性
对象名称.属性名称 = 值;
4.如何给一个对象添加行为
对象名称.行为名称 = 函数;
*/
// 创建对象的第一种方式
let obj = new Object();
obj.name = "lnj";
obj.age = 33;
obj.say = function () {
console.log("hello world");
}
console.log(obj.name);
console.log(obj.age);
obj.say();
*/
// 创建对象的第二种方式
let obj = {}; // let obj = new Object();
obj.name = "lnj";
obj.age = 33;
obj.say = function () {
console.log("hello world");
}
console.log(obj.name);
console.log(obj.age);
obj.say();
*/
// 创建对象的第三种方式
// 注意点: 属性名称和取值之间用冒号隔开, 属性和属性之间用逗号隔开
let obj = {
name: "lnj",
age: 33,
say: function () {
console.log("hello world");
}
};
console.log(obj.name);
console.log(obj.age);
obj.say();
1.什么是函数?
函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数
2.什么是方法?
方法就是显示的和其它的类绑定在一起的, 我们就称之为方法
3.函数和方法的区别
3.1函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用
3.2函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象
4.无论是函数还是方法, 内部都有一个叫做this的东东
this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁
*/
/*
function demo() {
// console.log("hello demo");
console.log(this);
}
// demo();
window.demo();
*/
let obj = {
name: "lnj",
test: function () {
// console.log("hello test");
console.log(this);
}
}
// test();
obj.test();
/* */
1.什么是工厂函数?
工厂函数就是专门用于创建对象的函数, 我们就称之为工厂函数
*/
/*
let obj = {
name: "lnj",
age: 33,
say: function () {
console.log("hello world");
}
};
let obj = {
name: "zs",
age: 44,
say: function () {
console.log("hello world");
}
};
*/
function createPerson(myName, myAge) {
let obj = new Object();
obj.name = myName;
obj.age = myAge;
obj.say = function () {
console.log("hello world");
}
return obj;
}
let obj1 = createPerson("lnj", 34);
let obj2 = createPerson("zs", 44);
console.log(obj1);
console.log(obj2);
1.什么是构造函数
构造函数和工厂函数一样, 都是专门用于创建对象的
构造函数本质上是工厂函数的简写
2.构造函数和工厂函数的区别
2.1构造函数的函数名称首字母必须大写
2.2构造函数只能够通过new来调用
*/
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = function () {
console.log("hello world");
}
// return this; // 系统自动添加的
}
/*
1.当我们new Person("lnj", 34);系统做了什么事情
1.1会在构造函数中自动创建一个对象
1.2会自动将刚才创建的对象赋值给this
1.3会在构造函数的最后自动添加return this;
*/
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
console.log(obj1);
console.log(obj2);
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = function () {
// 方法中的this谁调用就是谁, 所以当前是obj1调用, 所以当前的this就是obj1
// console.log("hello world");
console.log(this.name, this.age);
}
// return this; // 系统自动添加的
}
let obj1 = new Person("lnj", 34);
// console.log(obj1.name);
// console.log(obj1.age);
obj1.say();
let obj2 = new Person("zs", 44);
obj2.say();
*/
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = function () {
console.log("hello world");
}
// return this; // 系统自动添加的
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
// 由于两个对象中的say方法的实现都是一样的, 但是保存到了不同的存储空间中
// 所以有性能问题
console.log(obj1.say === obj2.say); // false
/*
function demo() {
console.log("demo");
}
// 通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中
console.log(demo === demo); // true
*/
function mySay() {
console.log("hello world");
}
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = mySay;
// return this; // 系统自动添加的
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
console.log(obj1.say === obj2.say); // true
/*
1.当前这种方式解决之后存在的弊端
1.1阅读性降低了
1.2污染了全局的命名空间
*/
// function mySay() {
// console.log("hello world");
// }
let fns = {
mySay: function () {
console.log("hello world");
}
}
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = fns.mySay;
// return this; // 系统自动添加的
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
console.log(obj1.say === obj2.say); // true
/*
let fns = {
test: function () {
console.log("test");
}
}
// 由于test函数都是属于同一个对象, 所以返回true
console.log(fns.test === fns.test); // true
// let fns = {
// mySay: function () {
// console.log("hello world");
// }
// }
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
// this.say = fns.mySay;
// return this; // 系统自动添加的
}
Person.prototype = {
say: function () {
console.log("hello world");
}
}
let obj1 = new Person("lnj", 34);
obj1.say();
let obj2 = new Person("zs", 44);
obj2.say();
console.log(obj1.say === obj2.say); // true
// console.log(Person.prototype);
1.prototype特点
1.1存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享
1.2prototype中除了可以存储方法以外, 还可以存储属性
1.3prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函中的数据
2.prototype应用场景
prototype中一般情况下用于存储所有对象都相同的一些属性以及方法
如果是对象特有的属性或者方法, 我们会存储到构造函数中
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
this.currentType = "构造函数中的type";
this.say = function () {
console.log("构造函数中的say");
}
}
Person.prototype = {
currentType: "人",
say: function () {
console.log("hello world");
}
}
let obj1 = new Person("lnj", 34);
obj1.say();
console.log(obj1.currentType);
let obj2 = new Person("zs", 44);
obj2.say();
console.log(obj2.currentType);
1.每个"构造函数"中都有一个默认的属性, 叫做prototype
prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
2.每个"原型对象"中都有一个默认的属性, 叫做constructor
constructor指向当前原型对象对应的那个"构造函数"
3.通过构造函数创建出来的对象我们称之为"实例对象"
每个"实例对象"中都有一个默认的属性, 叫做__proto__
__proto__指向创建它的那个构造函数的"原型对象"
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
let obj1 = new Person("lnj", 34);
console.log(Person.prototype);
console.log(Person.prototype.constructor);
console.log(obj1.__proto__);
1.JavaScript中函数是引用类型(对象类型), 既然是对象,
所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
2.JavaScript中只要是"函数"就有prototype属性
"Function函数"的prototype属性指向"Function原型对象"
3.JavaScript中只要"原型对象"就有constructor属性
"Function原型对象"的constructor指向它对应的构造函数
4.Person构造函数是Function构造函数的实例对象, 所以也有__proto__属性
Person构造函数的__proto__属性指向"Function原型对象"
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
let obj1 = new Person("lnj", 34);
// console.log(Function);
// console.log(Function.prototype);
// console.log(Function.prototype.constructor);
// console.log(Function === Function.prototype.constructor); // true
// console.log(Person.__proto__);
console.log(Person.__proto__ === Function.prototype); // true
1. JavaScript函数是引用类型(对象类型), 所以Function函数也是对象
2."Function构造函数"也是一个对象, 所以也有__proto__属性
"Function构造函数"__proto__属性指向"Function原型对象"
3. JavaScript中还有一个系统提供的构造函数叫做Object
只要是函数都是"Function构造函数"的实例对象
4.只要是对象就有__proto__属性, 所以"Object构造函数"也有__proto__属性
"Object构造函数"的__proto__属性指向创建它那个构造函数的"原型对象"
5.只要是构造函数都有一个默认的属性, 叫做prototype
prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
6.只要是原型对象都有一个默认的属性, 叫做constructor
constructor指向当前原型对象对应的那个"构造函数"
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
let obj1 = new Person("lnj", 34);
// console.log(Function.__proto__);
// console.log(Function.__proto__ === Function.prototype); // true
// console.log(Object);
// console.log(Object.__proto__);
// console.log(Object.__proto__ === Function.prototype); // true
// console.log(Object.prototype);
// console.log(Object.prototype.constructor);
// console.log(Object.prototype.constructor === Object); // true
// console.log(Object.prototype.__proto__); // null
1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象
2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数
3.所有函数都是Function构造函数的实例对象
4.所有函数都是对象, 包括Function构造函数
5.所有对象都有__proto__属性
6.普通对象的__proto__属性指向创建它的那个构造函数对应的"原型对象"
7.所有对象的__proto__属性最终都会指向"Object原型对象"
8."Object原型对象"的__proto__属性指向NULL
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
let obj1 = new Person("lnj", 34);
console.log(Function.prototype.__proto__);
console.log(Person.prototype.__proto__);
console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Person.prototype.__proto__ === Object.prototype);
1.对象中__proto__组成的链条我们称之为原型链
2.对象在查找属性和方法的时候, 会先在当前对象查找
如果当前对象中找不到想要的, 会依次去上一级原型对象中查找
如果找到Object原型对象都没有找到, 就会报错
*/
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
// this.currentType = "构造函数中的type";
// this.say = function () {
// console.log("构造函数中的say");
// }
}
Person.prototype = {
// 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁
constructor: Person,
// currentType: "人",
// say: function () {
// console.log("hello world");
// }
}
let obj1 = new Person("lnj", 34);
// obj1.say();
console.log(obj1.currentType);
// console.log(Person.prototype.constructor);
网友评论