js学习笔记02-类和对象,继承

创建类和对象 

//1)构造函数定义类,不用new
function Dog(){
 this.name = "Luby";
 this.say = function(){
  console.log("wangwang!");
 }
}
let objDog = new Dog();  //创建对象的时候new
//2)工厂方式定义类
function Dog(){
  let dog = new Object;  //变量,然后new Object;
    dog.name = "Luby";
    dog.say = function(){
      console.log("wangwang");
    }
    return dog;
}
let dog = Dog();  //直接使用函数
//以上两种方式的缺点:每一个新的对象都需要创建一个say();
//3)一般用原型+构造函数的方式定义类
function Dog(){
 this.name = "Luby";
}
Dog.prototype.say = function(){
  console.log("wangwang!");
 }
let objDog = new Dog();  //

构造函数

结构语法

//构造函数并不声明局部变量，而是使用 this 关键字来保存数据
//this 是指在构造函数前面使用 new 关键字创建的新对象
function SoftwareDeveloper() {
  this.useLanguage = ‘JavaScript‘;
}
let developer = new SoftwareDeveloper();

查看对象的构造函数 (instanceof)

function SoftwareDeveloper() {
  this.useLanguage = ‘JavaScript‘;
}
let developer = new SoftwareDeveloper();
developer instanceof SoftwareDeveloper; // instanceof返回值为true;

constructor 属性

每次创建一个对象时，都会有一个特殊的属性被暗中分配给它：constructor。访问一个对象的 constructor 属性会返回一个对创建该对象的构造函数的引用！

function Cat(){
 this.name = "fish";
}
let obj = new Cat();
console.log(obj.constructor); //  ? Cat(){this.name = "fish";)

如果某个对象是使用字面量表示法创建的，那么它的构造函数就是内置的 Object() 构造函数！

let obj = {
 name: "fish"
}
console.log(obj.constructor);//  ? Object() { [native code] }
// 和java的class一样(每个class都有一个无参的什么都不做得构造函数)

this

当使用 new 运算符来调用构造函数时，this 变量会被设置为新创建的对象。当在对象上调用方法时，this 会被设置为该对象本身。当在浏览器环境中调用函数时，this 会被设置为 window，也被称为全局对象。

总结:

函数如何调用决定了函数内this的值(当前的函数属于谁或当前发生事件的对象)
构造函数中的this 是指在构造函数前面使用 new 关键字创建的新对象

this的应用: call(),apply(),bind()(回调函数)

call() 是一个直接调用到函数上的方法。我们传递给它一个单一的值，以设置为 this 的值，然后逐个传入该函数的任何参数，用逗号分隔。
apply()区别就是后面的多个参数为数组,事先并不知道函数所需要的参数个数就使用apply

const num = {
  sum: function (n1,n2) {
    return n1*n2;
  }
};
const title = {
  n1: 25,
  n2: 18.0
}
console.log(num.sum.call(title,title.n1,title.n2));//450  相当于把.call前面的方法声明到obj这个对象里面
console.log(num.sum.apply(title,[title.n1,title.n2]));

使用 bind() 来保存 this(回调函数中的this)

const dog = {
 age: 3,
 growOneYear: function(){
 this.age +=1;
}
}
function invokeTwice(cb) {
 cb();
 cb();
}
invokeTwice(dog.growOneYear);//这里的this为window
console.log(dog.age); //3
let change = dog.growOneYear.bind(dog);
invokeTwice(change); //由bind指定了this为dog
console.log(dog.age); //5

window 对象

页面的 URL (window.location;)
页面的垂直滚动位置 (window.scrollY)
滚动到新位置（window.scroll(0, window.scrollY + 200);，从当前位置向下滚动 200 个像素）
打开一个新的网页 (window.open("https://www.sugarbeans.com/");)

对象 Object

var goods = new Object();
Object.keys(goods);
Object.values(goods);

原型继承prototype

JavaScript 中的继承是指一个对象基于另一个对象
JavaScript 中的继承重点就是建立原型链
当使用 new 运算符将一个函数作为构造函数来调用时，该函数会创建并返回一个新的对象。这个对象会被秘密链接到其构造函数的 prototype，而它只是另一个对象。使用这个秘密链接，可以让一个对象访问原型的属性和方法，就像是它自己的一样。如果 JavaScript 没有在某个对象中找到一个特定属性，它将在原型链上继续查找。如有必要，它会一路查找到 Object()（顶级父对象）
proto（注意每一端有两个下划线）是构造函数所创建的所有对象（即实例）的一个属性，并直接指向该构造函数的 prototype 对象(警告:不要使用这个属性)
简单应用

function Cat(){
this.name = "coff";
}
let cat1 = new Cat();
let cat2 = new Cat();
Cat.prototype.say = function(){
  console.log("woool");
};
Cat.prototype.color = "red" //添加属性
Cat.prototype = { //指向了新的对象
 color: "red"
};
console.log(cat1.__proto__); //  {say: ?, color: "red", constructor: ?}

Object.create()

防止子对象修改父对象的属性 如:child.prototype.earBones = 5;
Object.create() 会接受一个对象作为参数，并返回一个新的对象，其 proto 属性会被设置为传递给它的参数。然后，你只需要将所返回的对象设置为子对象构造函数的原型即可

const mammal = {
   vertebrate: true,
   earBones: 3
};
const rabbit = Object.create(mammal); //Object.create()
console.log(rabbit);  // {}
console.log(rabbit.__proto__ === mammal); //true

构造函数之间的继承

function Animal(name){
  this.name = name;
}
Animal.prototype.walk = function(){
  console.log(`${this.name} walks!`);
} //定义了类Animal
function Cat(name){
  Animal.apply(this,[name]); //不使用new,使用父类的属性,如下:
     //let obj = new Animal(name);
 // this.name = obj.name;
}
Cat.prototype = Object.create(Animal.prototype); //类Cat继承Animal
let str = new Cat("miaomiao");
console.log(str.walk());

原型相关的函数

hasOwnProperty
hasOwnProperty() 可以帮助你找到某个特定属性的来源。在向其传入你要查找的属性名称的字符串后，该方法会返回一个布尔值，指示该属性是否属于该对象本身（即该属性不是被继承的）

function Phone() {
   this.operatingSystem = ‘Android‘;
}
Phone.prototype.screenSize = 6;
const myPhone = new Phone();
const own = myPhone.hasOwnProperty(‘operatingSystem‘); // true
const inherited = myPhone.hasOwnProperty(‘screenSize‘); // false

isPrototypeOf()和Object.getPrototypeOf()
isPrototypeOf()可以检查某个对象是否存在于另一个对象的原型链中。
Object.getPrototypeOf()确定某个对象的原型是什么呢

const dog = {
 name: "hero",
 age: 2
}
function Cat(){
  this.say= function(){
  console.log("miaomiao")
};
};
Cat.prototype = dog;  //
let str = new Cat();
//str.say();方法已经被覆盖
dog.isPrototypeOf(str); //true 注意调用顺序.
const myPrototype = Object.getPrototypeOf(str); //获取原型
console.log(myPrototype); //{name: "hero", age: 2}

原文地址：http://blog.51cto.com/5845595/2116150

时间： 2024-11-08 22:30:01

js学习笔记02-类和对象,继承的相关文章

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam

学习笔记——Java类和对象

今天学习了Java的类和对象的相关知识,由于Java面向对象的编程的思想和C++几乎一样,所以需要更多的关注Java的一些不同之处. 1.类 1.1 在类这一块,除了基本的成员变量,成员方法,构造函数等外,需要掌握三种权限修饰符的区别,并会合理使用(private限制了权限只在本类,protected限定了权限只在包内). 1.2 静态常量.变量.方法:static修饰.我们可以使用“类名.静态类成员”来调用,如: public class StaticTest{ static double P

Java学习笔记1——类和对象

面向对象 对象:万物皆对象 面向对象 类:模子,属性+方法,类是对象的类型,是具有相同属性和方法的一组对象的集合 对象属性:对象拥有的各种特征,"对象有什么" 对象方法:对象执行的操作,"对象能干什么" 类与对象的关系/区别:类是抽象的,仅仅是模版:对象是看得到,摸得着的具体实体.例如:'手机'类,对象为iPhone6,Lumia920 Java中的类 定义类:Java程序都以类class为组织单元 创建一个对象 //1.定义一个类 public class Tel

Java学习笔记-3.类与对象

一.面向对象程序设计 1.概念:   OOA:面向对象的分析,将现实世界进行抽象的分析 OOD:面向对象的设计 OOP:面向对象的程序 2.面向对象的特点: (1)封装性:一是把对象的全部状态和行为结合在一起,形成一个不可分割的整体,对象的私有属性只能由对象的行为来修改和读取 二是尽可能隐藏对象的内部细节,与外界的联系只能够通过外部接口来实现 (2)继承性:特殊类的对象拥有其一般类的属性和行为 (3)多态性:指同一个实体同时具有多种形式,体现在不同的对象可以根据相同的消息产生各自不同的动作 二.

Objective-C学习笔记______类和对象的使用

// // main.m // 类和对象 // // Created by apple on 15/5/30. // Copyright (c) 2015年 apple. All rights reserved. // #import <Foundation/Foundation.h> @interface Computer : NSObject //定义电脑这么一个类 { @public NSString *namec; //定义一个NSString类型名为namec的指针,用于指向一个字符

Objective-C学习笔记_类和对象

一 Objective-C概述 二 面向对象编程OOP Object Oriented Programming 三 类和对象 OC中类的定义 接口部分 实现部分 类和文件 创建对象 使对象 四 实例变量操作 一 Objective-C概述 Cocoa和Objective-C是苹果公司Mac OS X操作系统的核心.1980年初,Brad Cox发明了Objective-C,意将流行的.可移植的C语言和Smalltalk语言结合在一起:1985年,Steve Jobs成立NeXT公司,NeXT选择

JS学习笔记（三） 对象

参考资料: 1. http://www.w3school.com.cn/js/js_objects.asp ? 知识点: ? Javascript中的所有事物都是对象. ? Javascript是基于prototype,而不是基于类的. ? Javascript是面向对象的语言,但Javascript不使用类.因此,在Javascript中,不会创建类,也不会通过类来创建对象. ? Javascript中的所有数字都存储为根为10的64位的浮点数.其中,整数最多为15位,小数最大位数为17,且浮

Java面向对象学习笔记 -- 1(类、对象、构造器)

1. 类 1)是同类型东西的概念,是对现实生活中事物的描述,映射到Java中描述就是class定义的类. 2)其实定义类,就是在描述事物,就是在定义属性(变量)和方法(函数). 3)类中可以声明:属性,方法,构造器: 属性就是实例变量,用于声明对象的结构的,在创建对象时候分配内存,每个对象有一份! 实例变量(对象属性)在堆中分配,并作用于整个类中,实例变量有默认值,不初始化也能参与运算. 4)类与类之间的关系: ① 关联:一个类作为另一个类的成员变量 public class A { pulic

JS学习笔记02

学习新知识,探究新方法,是一个由"知器"-->"格物"-->"明理"-->"成道"依次演变的进化过程,需要循序渐进.由浅入深, 不过最终是否可以修炼成道骨仙风的"佛"家境界,则全凭个人的恒心.悟性和造化 百度和谷歌两大搜索引擎主页,表面看似简单,但内深藏玄机,其页面上的每一个像素点,用价值千金来形容,似乎也不为过.好了,下面我们用数据与事实说话,请看简单统计后的表格数据:  当用户打开网页

Swift学习笔记之--类和对象

通过在 class后接类名称来创建一个类.在类里边声明属性与声明常量或者变量的方法是相同的,唯一的区别的它们在类环境下.同样的,方法和函数的声明也是相同的写法 class Shape { var numberOfSides = 0 func simpleDescription() -> String { return "A shape with \(numberOfSides) sides." } } 通过在类名字后边添加一对圆括号来创建一个类的实例.使用点语法来访问实例里的属性